0

Hola intento abrir un elemento con el evento onclick, pero necesito 2 clics para poder abrir el modal en dicho evento.

Añado codigo HTML también, supongo que es por la función, pero no lo tengo demasiado claro, por si alguien me puede hechar una mano.

Gracias.

Adjunto el código:

  function modal(num){
    var modal = document.getElementById("myModal_" + num);
    var btn = document.getElementById("myBtn_" +num);
    btn.onclick = function() {
      modal.style.display = "block";
    }
    var span = document.getElementsByClassName("close")[0];
    span.onclick = function() {
      modal.style.display = "none";
    }
    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
   }


document.getElementById("myBtn_1").onclick = function(){
    modal(1);
  }



echo "<div id='myModal_$num' class='modal'>";
  echo "<div class='modal-content'>";
  echo "<span class='close'>&times;</span>";
  echo "<h3 style='color:#145C99; text-decoration: underline;'>ARCHIVOS</h3>";
  echo "</div>";
  echo "</div>";
    echo "<i id='myBtn_1' class='fa fa-eye' aria-hidden='true'>";
2
  • Podrías agregar tu código de HTML?
    – Sr1871
    Commented el 22 abr. 2022 a las 7:20
  • Tienes un btn.click dentro de una función que llamas al hacer click, yo creo que eso puede estar haciendo algo para que no te lo muestre correctamente
    – Maida
    Commented el 22 abr. 2022 a las 8:22

1 respuesta 1

1

Tienes dos errores, el primero es que llamas al metodo onclick del elemento myBtn_1 dentro del metodo modal, el segundo error es que creas un metodo onclick para el elemento btn que no es necesario, con la primera llamada al dar click en myBtn_1 es suficiente.

Acomoda este codigo

    function modal(num){
  

    var modal = document.getElementById("myModal_" + num);
    var btn = document.getElementById("myBtn_" +num);
    
    modal.style.display = "block";
  
    var span = document.getElementsByClassName("close")[0];
    span.onclick = function() {
    modal.style.display = "none";
    };
    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
   };

};
document.getElementById("myBtn_1").onclick = function(){
    modal(1);
  };

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.