How can I cycle through all the images using a call trigger? When I click on an image, a modal popup should display both text and the image.
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
}<div portfolio-item ">
<a class="trigger "><img src="images/techify.jpg "/></a>
<div class="modal ">
<div class="modal-content ">
<img class="modalimages " src ="Images/techify.jpg ">
<div class="modal-text ">
<p> It is all about a training institute</p>
</div>
</div>
</div>
</div>
<div class="modal-content ">
<img class="modalimages " src ="Images/HairStyling.jpg ">
</div>
</div>