Tengo un modal de imagen y lo tenía en la imagen de ID que obviamente no funcionó, así que cambié id a class y ahora el modal de imagen no funciona en absoluto y no puedo ver qué tiene de malo. Se agradece toda y cualquier ayuda.
Modalidad HTML
<div id="myModal" class="modal"> <span class="close">x</span> <img class="modal-content" id="img01"> <div id="caption"></div> </div>
Imagen PHP
"<tr><td><img class='myImg' src='" . $fileName . "' alt=' ". $obj->Description . "' width='50px'>" .
JavaScript
var modal = document.getElementById("myModal"); var img = document.getElementsByClassName("myImg"); for(var i=0; i<img.length; i++){ var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); img[i].addEventListener = ('click', function(){ modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt; }) } var span = document.getElementsByClassName("close")[0]; document.addEventListener("keydown", function(event) { const key = event.key; if (key === "Escape") { modal.style.display = "none"; } }) span.onclick = function() { modal.style.display = "none"; }
El detector de eventos de clic en el ciclo for
es incorrecto. Actualmente está asignando la función de devolución de llamada al método addEventListener
.
img[i].addEventListener = ('click', function(){
Esto debería ser:
img[i].addEventListener('click', function() {