docs/assets/js/modal.js

34 lines
1.2 KiB
JavaScript

// Get the modal for image 1
var modal = document.getElementById("img-modal1");
// If modal exists, get the image and insert it inside the modal - use its "alt" text as a caption
if (modal) {
const images = document.querySelectorAll("main img");
var modalImg = document.getElementById("img-modal-img1");
var captionText = document.getElementById("img-modal-caption1");
function handleImageClick(event) {
modal.style.display = "block";
modalImg.src = event.target.src;
modalImg.alt = event.target.alt;
captionText.innerHTML = event.target.alt;
window.addEventListener("keydown", handleModalClose)
}
images.forEach(image => image.addEventListener("click", handleImageClick))
// Get the element that closes the modal
var span = document.getElementById("img-modal-close1");
function handleModalClose(event) {
if (event.type==="click"||event.key==="Escape"){
modal.style.display = "none"
window.removeEventListener("keydown", handleModalClose)
}
}
modal.addEventListener("click", handleModalClose)
// When the user clicks on (x), close the modal
span.onclick = function(){
modal.style.display = "none";
}
}