Bootstrap popup modal for multiple images

Question

I am referring to this tutorial about modal image here.

The example show ONE image, which when clicked on, pops up in a modal. Some JavaScript is involved and I am not quite familiar with JavaScript.

If instead of this line:

<img id="myImg" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">

,I have multiple images (say 4) arranging like below:

<img id="myImg1" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">
<img id="myImg2" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">
<img id="myImg3" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">
<img id="myImg4" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">

how do I modify this code (and maybe the JavaScript) so that the modal popup shows the respective image that is clicked on?

<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

Creating one modal for each image seems like a very crude way to do this.

Thanks,

You haven't shown your JS, but wherever you handle the click that opens the modal you need to a) find the image that was clicked; b) insert that into the modal; c) open the modal. There are many examples here on SO, eg: https://stackoverflow.com/questions/25023199/in-bootstrap-open-enlarge-image-in-modal — Don't Panic, Jul 07 '20 at 03:49

Bootstrap popup modal for multiple images

0 Answers0