Hace poco lancé un sitio web para unos colegas, dicho sitio es para mostrar su proyecto.
Lancé 2 versiones, una en inglés y una en español. Este sitio tiene una galería de imágenes la cual, al hacerle click, ésta imagen se agranda y sale en la esquina un botón X para sacarla:
El problema viene con que el botón no funciona, literalmente. No importa el dispositivo (pc, tablet, teléfono), al hacerle click el botón no saca la imagen, forzando al usuario a recargar la página.
Lo más curioso es que éste problema sólo aparece en la versión en ingles del sitio web, ya que en la versión en español puedo cerrar la imagen sin problemas, revise y ambos códigos son exactamente iguales. ¿Porque pasa esto?
Adjunto ahora fragmentos de los códigos:
Versión en ingles:
<!-- TABLA DE SCREENSHOTS-->
<h2 style="align:center; color:white" align="center"> SCREENSHOTS (Prototype) </h2>
<table >
<!-- PRIMERA LINEA-->
<tr>
<th>
<!--IMAGEN 4-->
<img id="04" src="officina.png" style="width:85%" align="right">
<div id="myModal04" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img04">
<div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal04");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("04");
var modalImg = document.getElementById("img04");
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")[3];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</th>
Versión en español:
<!-- TABLA DE SCREENSHOTS-->
<h2 style="align:center; color:white" align="center"> IMÁGENES (Prototipo)</h2>
<table>
<!-- PRIMERA LINEA-->
<tr>
<th>
<!--IMAGEN 4-->
<img id="04" src="officina.png" style="width:85%">
<div id="myModal04" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img04">
<div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal04");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("04");
var modalImg = document.getElementById("img04");
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")[3];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</th>
También adjunto sitio web para que lo vean con sus propios ojos:
onclick
debe serspan.addEventListener("click",function(){ modal.style.display.none;})
fragmento javascript/hmtl/CSS
o con la opcion control+M para mejorar la eficiencia de tu codigo ya que estas haciendo una funcion por cada imagen y deberia ser una para todas!