Multiple image modals with multiple captions

Question

i need to have multiple image modals with different bodies. Each image would have a separate description that shows up when its clicked. I've only found other answers that display each images alt but I need it to display other text when its clicked. I have it right now where i have multiple image modals but each one opens the same caption.

The javascript

function onClick(element) {

  document.getElementById("modal01").style.display = "block";

}

The html

  <div class="container1">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTczNTI2ODUwOF5BMl5BanBnXkFtZTcwMTU0NTIzMw@@._V1_SY1000_CR0,0,674,1000_AL_.jpg" style="max-width:100%;cursor:pointer"
    onclick="onClick(this)" class="modal-hover-opacity">
  </div>
  <div class="container1">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTUyNzk3MjA1OF5BMl5BanBnXkFtZTcwMTE1Njg2MQ@@._V1_SY1000_CR0,0,674,1000_AL_.jpg" style="max-width:100%;cursor:pointer" 
    onclick="onClick(this)" class="modal-hover-opacity">

  </div>
  <div class="container1">
    <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTM0MDgwNjMyMl5BMl5BanBnXkFtZTcwNTg3NzAzMw@@._V1_.jpg" style="max-width:100%;cursor:pointer" 
    onclick="onClick(this)" class="modal-hover-opacity">

  </div>



<div id="modal01" class="modal" onclick="this.style.display='none'">
  <span class="close">&times;&nbsp;&nbsp;&nbsp;&nbsp;</span>
  <div class="modal-content">
    <img id="img01" style="max-width:100%">
    <div id="caption" style="color:white">This is the caption</div>
    <div id="2ndcaption" style="color:white">this is the 2nd</div>
    <div id="3rdcaption" style="color:white">This is the 3rd</div>
  </div>
</div>

and the CSS

.modal {
z-index:1;
display:none;
padding-top:10px;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
overflow:auto;
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.8)
}

.modal-content{
margin: auto;
display: block;
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.modal-hover-opacity {
opacity:1;
filter:alpha(opacity=100);
-webkit-backface-visibility:hidden
}

.modal-hover-opacity:hover {
opacity:0.60;
filter:alpha(opacity=60);
-webkit-backface-visibility:hidden
}


.close {
text-decoration:none;float:right;font-size:24px;font-weight:bold;color:white
}
.container1 {
width:200px;
display:inline-block;
}
.modal-content, #caption {   

    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

Answer 1

the below should do the trick

first you need to define the selected image by the event that was fired from then find the caption by id (id="1stcaption" for example) by the attribute value of the img (class or title (as below)) (which is should be 1stcaption )

made another click eventlistener fired one "modal" click to hide the previous selected element and close the "modal"

or console log every thing you you will figure it out ;)

javascript

function onClick(event) {

  const selectedElement = event.getAttribute("title")



  const allCaptions = document.getElementById(selectedElement)

  allCaptions.style.display = 'block';
  document.getElementById("modal01").style.display = "block";



  document.querySelector('.modal').addEventListener('click', function (event) {

    document.getElementById("modal01").style.display = "none";
    allCaptions.style.display = 'none';


  })



}

HTML

  <div class="container1">
    <img
      src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTczNTI2ODUwOF5BMl5BanBnXkFtZTcwMTU0NTIzMw@@._V1_SY1000_CR0,0,674,1000_AL_.jpg"
      style="max-width:100%;cursor:pointer" onclick="onClick(this)" class="modal-hover-opacity" title="1stcaption">
  </div>
  <div class="container1">
    <img
      src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTUyNzk3MjA1OF5BMl5BanBnXkFtZTcwMTE1Njg2MQ@@._V1_SY1000_CR0,0,674,1000_AL_.jpg"
      style="max-width:100%;cursor:pointer" onclick="onClick(this)" class="modal-hover-opacity" title="2ndcaption">

  </div>
  <div class="container1">
    <img
      src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTM0MDgwNjMyMl5BMl5BanBnXkFtZTcwNTg3NzAzMw@@._V1_.jpg"
      style="max-width:100%;cursor:pointer" onclick="onClick(this)" class="modal-hover-opacity" title="3rdcaption">

  </div>



  <div id="modal01" class="modal">
    <span class="close">&times;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <div class="modal-content">
      <img id="img01" style="max-width:100%">
      <div id="1stcaption" style="color:white; display : none">This is the caption</div>
      <div id="2ndcaption" style="color:white; display : none">this is the 2nd</div>
      <div id="3rdcaption" style="color:white; display : none">This is the 3rd</div>
    </div>
  </div>

Answer 2

There are so many ways to the same task. I made this one quickly for your case.

Notice that I first enable the visibility with the attribute visible in the proper caption and then I switch off the visibility with the cleanAttribute() on the close button.

I hope this can help you.

 function onClick(element) { let caption = 'caption'.concat(element.id.charAt(element.id.length - 1)); document.getElementById("modal01").style.display = "block"; document.getElementById("modal01").setAttribute("visible", caption) document.getElementById(caption).toggleAttribute("visible"); } function cleanAttribute(element) { if (element.hasAttribute("visible")) { let caption = element.getAttribute("visible"); document.getElementById(caption).toggleAttribute("visible"); element.removeAttribute("visible") } }

 .modal { z-index:1; display:none; padding-top:10px; position:fixed; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgb(0,0,0); background-color:rgba(0,0,0,0.8) } .modal-content{ margin: auto; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .modal-hover-opacity { opacity:1; filter:alpha(opacity=100); -webkit-backface-visibility:hidden } .modal-hover-opacity:hover { opacity:0.60; filter:alpha(opacity=60); -webkit-backface-visibility:hidden } .close { text-decoration:none;float:right;font-size:24px;font-weight:bold;color:white } .container1 { width:200px; display:inline-block; } .modal-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } div[visible] { display: block !important; }

 <div class="container1"> <img id="image1" src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTczNTI2ODUwOF5BMl5BanBnXkFtZTcwMTU0NTIzMw@@._V1_SY1000_CR0,0,674,1000_AL_.jpg" style="max-width:100%;cursor:pointer" onclick="onClick(this)" class="modal-hover-opacity"> </div> <div class="container1"> <img id="image2" src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTUyNzk3MjA1OF5BMl5BanBnXkFtZTcwMTE1Njg2MQ@@._V1_SY1000_CR0,0,674,1000_AL_.jpg" style="max-width:100%;cursor:pointer" onclick="onClick(this)" class="modal-hover-opacity"> </div> <div class="container1"> <img id="image3" src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTM0MDgwNjMyMl5BMl5BanBnXkFtZTcwNTg3NzAzMw@@._V1_.jpg" style="max-width:100%;cursor:pointer" onclick="onClick(this)" class="modal-hover-opacity"> </div> <div id="modal01" class="modal" onclick="this.style.display='none',cleanAttribute(this)"> <span class="close">&times;&nbsp;&nbsp;&nbsp;&nbsp;</span> <div class="modal-content"> <img id="img01" style="max-width:100%"> <div id="caption1" style="color:white; display: none;">This is the caption</div> <div id="caption2" style="color:white; display: none;">this is the 2nd</div> <div id="caption3" style="color:white; display: none;">This is the 3rd</div> </div> </div>