pop up modal appear on click

Question

I have a page with a bunch of cards on it. I want a pop up to appear when a card is clicked. Ultimately, I would like to have the content of the pop up be different for each card, but for now I just want to get the pop up to work. I was able to get the javaScript code to work with getElementById, but that wont work as I have many different cards. Can someone help me get this javascript working?

Here is my HTML

<div class="cardContainer">
                <div class="trainingCard">
                    <div class="cardText"> 
                        <h1>How to fill out a time card</h1>
                        <p> To learn out how to fill out a time card, click this card to acess a digital training lesson!</p> 
                    </div>
                </div>

                <!-- next training card-->
                <div class="trainingCard">
                    <div class="cardText"> 
                        <h1>How to change labels</h1>
                        <p> To learn out replace the labels in a labeler machine, click this card to acess a digital training lesson!</p> 
                    </div>
                </div>
            <!-- next training card-->
                <div class="trainingCard">
                    <div class="cardText"> 
                        <h1>How to insert a trigger</h1>
                        <p> To learn how to insert a trigger when working on a liquid filling line, click this card to access a digital training lesson!</p> 
                    </div>
                </div>
            <!--end card container-->
            </div>


<div class="popUpModal" id=popUpModal>
    
    <div class="popUpContent">
        <div class="close">+</div>
        <h1 class="trainingPopUpHeader">How to Change Labels</h1>
        <div  class="trainingPopUpDescription">
            <p>When the labeler machine runs out of labels, it is up to one of the associates to replace the labels
             so the machine can continue running. It is important to be quick and accurate when reloading the labels. 
             Watch the video and read the step-by-step instructions to complete this training.    
            </p>
        </div>
        <div class= "trainingStepList">
            <p>
                1. Pull off used back paper <br>
                2. Find new pack of front & back labels <br>
                3. Insert front labels onto the front left roller <br>
                4. Insert back labels onto the front right roller <br>

            </p>
        </div>
        <video class="trainingVideo" controls>
            <source src="testVid.mp4">
        </video>

                        <!--add video element-->
                        <!--add step by step instructions-->
                                        
        <!--need a text header, a step by step instruction list, a video, and an input form for name-->
    </div>  


</div>

Here is my CSS

    .popUpModal{
    width: 100%; 
    height: 100%;
    top: 0;

    background-color: rgba(0,0,0,0.7);

    display: none;
    position: fixed;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.popUpContent{
    width: 50%;
    height: 80%;
    padding-bottom: 20px;

    background-color: white;
    border-radius: 8%;

    display: inline-block;
    justify-content: center;
    vertical-align: center;
    position: relative;

    font-family: "Source Sans Pro",sans-serif;
}

.close{
    position: absolute;

    right: 5px;
    margin-right: 5%;

    font-size: 40px;
    transform: rotate(45deg);
    font-weight: bold;
    cursor: pointer;
}

.trainingPopUpHeader{
    margin-top: 4%;
    font-size: 40px;

    text-decoration: underline;
}

.trainingPopUpDescription{
    margin-top: 4%;
    margin-left: 10%;
    margin-right: 10%;

    font-size: 20px;
}

.trainingStepList{
    margin-left: 4%;

    font-weight:bold;
    text-align: left;
    font-size: 30px;
}

.trainingVideo{
    height: 25%;
    border-radius: 5%;
    margin-bottom: 3%;
}

Here is my JavaScript, it does not work

    var modal = document.getElementsByClassName("popUpModal");
var trainingCard = document.getElementsByClassName("trainingCard");

trainingCard.onclick = function(){
    modal.style.display = "flex";
}

Answer 1

I will try to explain on my abstract example. Your goal is to archive to trigger one modal multiple times. First of all: You have to bind every button which have trigger a modal. Your second goal was to change content in the modal in tn the context to the button. You can archive this for example if you put the context-content as data-attribute to the button. The you are able to fetch this and insert to the modal.

abstract example

const btns = document.querySelectorAll('.btn-list button');
const m = document.querySelector('.modal');
btns.forEach(b => {
  b.addEventListener('click', (e) => {
    m.classList.remove('hide')
    const t = e.target.getAttribute('data-attribute');
    m.querySelector('p').innerHTML = t;       
  })
});

const close = document.querySelector('.close');
close.addEventListener('click', (e) => {
  m.classList.toggle('hide');
})

.modal {
  position: relative;  
  height:200px;
  width: 200px;
  background-color: green;
  color: white;  
  padding: 2px 10px;
  box-sizing: border-box;
}

.modal div {
  position: absolute;
  top: -10px;
  right:-10px;
  text-align:left;
  margin-top: auto;
  font-weight: bold;
  padding: 5px 10px;
  background: red;
  border-radius: 20px;
  cursor: pointer;  
}

.hide {  
  display: none;
}

<div class="modal">
  <p>MODAL</p>
  <div class="close">x</div>
</div>

<ul class="btn-list">
  <li><button data-attribute="text 1">1</button></li>
  <li><button data-attribute="text 2">2</button></li>
  <li><button data-attribute="text 3">3</button></li>
</ul>

Answer 2

"getElementsByClassName" as the name suggests gives you multiple elements a.k.a. HTMLCollection which is practically an array. And you can't assign "onclick" or change "style" (which doesn't exist on these collections) to this collection. You have to loop through the collection and assign events to every single item individually.

Answer 3

In your code modal contains a list of HTML elements. You can only do modal.style.display = when modal is an HTML element. An easy solution is to instead do

var modal = document.getElementById("popUpModal");

using getElementById instead of getElementsByClassName. This will give you a single HTML elements instead of a list of elements.

The other solution, which is good when you when you may have multiple elements you want to change, is to do as digitalniweb suggests and loop over all of the popUpModals returned by using getElementsByClassName, changing each one of the modals to display flex. This stack overflow questions gives you different options of how to loop over the results from document.getElementByClassName (technically it returns an HTML collection, so normal ways of looping over an array don't always work, as a result, in that SO answer, you will find many alternative solutions people have come up with to make it possible to loop over the HTML collection).