Multiple Modal Pop-ups to show different Images

Question

I'm a noob at coding but I am trying to make a team members' page where their image is clicked on and then another image pops up showing their description etc. I have copied a code from https://www.w3schools.com/howto/howto_css_modal_images.asp and then found a suggestion on StackOverflow in which I implemented their code onto mine. The only problem is I cannot get the other image to be clicked on and show a different image.

Here is the codepen: https://codepen.io/dm1010101/pen/wvmQPej Here is the JS code:

var modal = document.getElementById("myModal");
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    captionText.innerHTML = this.alt;
}

 // Get the <span> element that closes the modal
 var span = document.getElementsByClassName("close")[0];

 span.onclick = function() {
 modal.style.display = "none";
}

Answer 1

You are using same id on both images.

I used custom function img_click and passed the clicked element with it like this onClick="img_click(this)" and now your both images clicks are working fine and showing alts saved on those images. And ofcourse Id's are not needed as you are passing this with your function calling.

This this snippet.

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

var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
function img_click(img){
  modal.style.display = "block";
  captionText.innerHTML = img.alt;
}


// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

span.onclick = function() {
  modal.style.display = "none";
}

/* CSS for the team page*/
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}
/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}
/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}
/*end of css for team members*/

<img onClick="img_click(this)" src="https://static.igem.wiki/teams/4388/wiki/tester-image.png" alt="pug" style="width:100%;max-width:300px">


<div id="myModal" class="modal">

  <!-- The Close Button -->
  <span class="close">&times;</span>

  <!-- Modal Content (The Image) -->
  <img class="modal-content" src="https://static.igem.wiki/teams/4388/wiki/tester2.png">

  <!-- Modal Caption (Image Text) -->
  <div id="caption"></div>
</div>

<div>
  <img onClick="img_click(this)" src="https://static.igem.wiki/teams/4388/wiki/tester-image.png" alt="pugq" style="width:100%;max-width:300px">
</div>