How to add popup with different image to show?
Question
I found this link but when I add more images the popup doesn't work. I want to have multiple images with different popup image. How can I add more images and have different popups images?
https://www.w3schools.com/howto/howto_css_modal_images.asp
<div class="container" id="gallery">
`<h1>Gallery</h1>`
`<!-- Trigger the Modal -->
<img id="thumbnail-01" class="myImg" src="images/thumbnail.jpg" alt="Trolltunga, Norway" width="300" height="200">`
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="modal-image">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
<!-- Trigger the Modal -->
<img id="thumbnail-02" class="myImg" src="images/thumbnail.jpg" alt="Trolltunga, Norway" width="300" height="200">
<!-- The Modal -->
<div id="myModal" class="modal">
`<!-- The Close Button -->`
`<span class="close"` `onclick="document.getElementById('myModal').style.display='none'">×</span>`
`<!-- Modal Content (The Image) -->`
`<img class="modal-content" id="modal-image">`
`<!-- Modal Caption (Image Text) -->`
`<div id="caption"></div>`
`</div>`
`</div>`
<script>
`// Get the modal`
`var modal = document.getElementById('myModal');`
// Get the image and insert it inside the modal - use its "alt" text as a caption
`var img = document.getElementsByClassName('myImg');`
`var modalImg = document.getElementById("modal-image");`
`var captionText = document.getElementById("caption");`
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
2 answers
solution1
0 2020-03-30 20:05:53
The javascript code is tied to the ID of your image. var modal = document.getElementById("myModal"); What you could do is for each <img> tag you can include the extra data that you need (eg caption) as a data field for the tag like: <img data-caption="somevalue"> Then you can use the function to edit the modal (maximized panel) by populating the correct information for the clicked image. So you can reuse the same modal.
solution2
0 ACCPTED 2020-03-30 20:23:58
you can try something like this
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-row-padding">
<div class="w3-container w3-third">
<img src="img_snowtops.jpg" style="width:100%;cursor:pointer"
onclick="onClick(this)" class="w3-hover-opacity">
</div>
<div class="w3-container w3-third">
<img src="img_lights.jpg" style="width:100%;cursor:pointer"
onclick="onClick(this)" class="w3-hover-opacity">
</div>
<div class="w3-container w3-third">
<img src="img_mountains.jpg" style="width:100%;cursor:pointer"
onclick="onClick(this)" class="w3-hover-opacity">
</div>
</div>
<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
<span class="w3-button w3-hover-red w3-xlarge w3-display-topright">×</span>
<div class="w3-modal-content w3-animate-zoom">
<img id="img01" style="width:100%">
</div>
</div>
<script>
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
}
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.