I am in need of multiple image modals with different descriptions. Each image should have a unique caption that appears when clicked. I have searched for solutions that display alt text for each image, but I require it to show other specific texts upon clicking. Currently, I have set up multiple image modals, but they all open with the same caption.
Here is the JavaScript function:
function onClick(element) {
document.getElementById("modal01").style.display = "block";
}
And here is the HTML code:
<div class="container1">
<img src="image1.jpg" style="max-width:100%;cursor:pointer"
onclick="onClick(this)" class="modal-hover-opacity">
</div>
<div class="container1">
<img src="image2.jpg" style="max-width:100%;cursor:pointer"
onclick="onClick(this)" class="modal-hover-opacity">
</div>
<div class="container1">
<img src="image3.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">× </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>
Lastly, the CSS styles:
.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;
}