Estoy tratando de abrir un modal cuando hago clic en una imagen en una mampostería.
Reuní algunas piezas de código y llegué a este resultado, pero el problema es que el modo funciona solo si pongo una id en una imagen en ese momento. Si pongo la misma id en otra imagen, el modal no funciona.
Necesito que el modal funcione en todas las imágenes, y no solo en una. ¿algún consejo?
// Get the modal var modal = document.getElementById("myModal"); // Get the image and insert it inside the modal - use its "alt" text as a caption var img = document.getElementById("myImg"); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); img.onclick = function() { modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt; } // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } <!-- masonry html --> <div class="P-portfolio-masonry-cont cont-1400 ma mb-125"> <div class="P-portfolio-mc-foto"> <img id="myImg" src="https://assets.codepen.io/12005/windmill.jpg" alt="A windmill" /> </div> <div class="P-portfolio-mc-foto"> <img src="https://assets.codepen.io/12005/windmill.jpg" alt="A windmill" /> </div> <div class="P-portfolio-mc-foto"> <img src="https://assets.codepen.io/12005/windmill.jpg" alt="A windmill" /> </div> <div class="P-portfolio-mc-foto"> <img src="https://assets.codepen.io/12005/suspension-bridge.jpg" alt="A windmill" /> </div> <div class="P-portfolio-mc-foto"> <img src="https://assets.codepen.io/12005/windmill.jpg" alt="A windmill" /> </div> </div> <!-- modal html --> <div id="myModal" class="modal"> <span class="close">×</span> <img class="modal-content" id="img01"> <div id="caption"></div> </div>Debe agregar onClick a todos los elementos (imágenes): se supone que los id s son únicos dentro de un DOM, pero puede usar class es en su lugar.
// this returns a collection of elements ( var imgArray = document.getElementsByClassName("thumb"); // iterate thru the collection and add event listener for (let img of imgArray) { img.onclick = function() { console.log(this.alt); modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt; } }; // Get the modal var modal = document.getElementById("myModal"); // Get the image and insert it inside the modal - use its "alt" text as a caption var imgArray = document.getElementsByClassName("thumb"); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); for (let img of imgArray) { img.onclick = function() { console.log(this.alt); modal.style.display = "block"; modalImg.src = this.src; modalImg.title = this.title; captionText.innerHTML = this.alt; } }; // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } .thumb { width: 200px; height: 300px; display: inline-block; } <!-- masonry html --> <div class="P-portfolio-masonry-cont cont-1400 ma mb-125"> <div class="P-portfolio-mc-foto"> <img class="thumb" src="https://assets.codepen.io/12005/windmill.jpg" title="A windmill" alt="A windmill" /> </div> <div class="P-portfolio-mc-foto"> <img class="thumb" src="https://assets.codepen.io/12005/windmill.jpg" title="B windmill" alt="b windmill" /> </div> <div class="P-portfolio-mc-foto"> <img class="thumb" src="https://assets.codepen.io/12005/windmill.jpg" title="C windmill" alt="c windmill" /> </div> <div class="P-portfolio-mc-foto"> <img class="thumb" src="https://assets.codepen.io/12005/suspension-bridge.jpg" title="D windmill" alt="d windmill" /> </div> <div class="P-portfolio-mc-foto"> <img class="thumb" src="https://assets.codepen.io/12005/windmill.jpg" title="F windmill" alt="f windmill" /> </div> </div> <!-- modal html --> <div id="myModal" class="modal"> <span class="close">×</span> <img class="modal-content" id="img01"> <div id="caption"></div> </div>Actualizado para agregar título a las imágenes (para mostrar mientras se desplaza) - por comentarios