I am currently working on a school project and trying to create a modal, but I am facing some issues with its functionality.
html
<div id="kw1cpraktijk">
<img id="myImg" src="../assets/kw1cpraktijk.PNG">
<h2>Practical Assignment P2</h2>
<p>This is some text.</p>
</div>
<div id="willem2praktijk">
<img id="myImg1" src="../assets/willem2praktijk.PNG">
<h2>Project P1</h2>
<p>This is some text.</p>
</div>
<div id="myModal" class="modal">
<span class="close"> ×</span>
<img class="modal-content" id="img">
</div>
css
#myImg
{
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
width: 100%;
max-width:450px;
}
.modal
{
display: none;
position: fixed;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0, 0.85);
}
.modal-content
{
margin: auto;
display: block;
width: 100%;
max-width: 800px;
animation-name: zoom;
animation-duration: 0.6s;
}
@keyframes zoom
{
from {transform:scale(0)}
to {transform:scale(1);}
}
.close
{
position: absolute;
color: white;
font-size: 50px;
font-weight: bold;
right: 35px;
top: 0;
}
.close:hover
{
color: grey;
cursor: pointer;
text-decoration: none;
}
javascript
var modal = document.getElementById("myModal");
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img");
var captionText = document.getElementById("caption");
img.onclick = function() {
modal.style.display = "block";
modalImg.src = this.src;
}
var exit = document.getElementsByClassName("close")[0];
exit.onclick = function() {
modal.style.display = "none";
}
The current setup only works for the first image. It seems to be related to the JavaScript code as it runs only once. Any suggestions on what needs to be changed? Your help is greatly appreciated!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dignissim egestas lacus sit amet varius. Sed nec massa consectetur, posuere ex eget, convallis dui. Praesent aliquam leo nec metus tristique, vitae eleifend ex finibus. Pellentesque sagittis luctus eros, in placerat mauris efficitur id. Suspendisse ultricies sit amet lectus id rhoncus. Nam ligula quam, vulputate quis lacinia vitae, tempus sit amet risus. Duis lectus lectus, volutpat vitae justo at, pulvinar dignissim est. Nullam dignissim interdum dapibus. Duis commodo euismod lorem a posuere. Aliquam tincidunt iaculis vehicula. Nunc eget vestibulum velit. Vivamus tempor leo eget ex aliquam sollicitudin. Suspendisse sodales vel libero in fermentum.