mirror of https://github.com/docker/docs.git
34 lines
1.2 KiB
JavaScript
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";
|
|
}
|
|
}
|