0

Hola buenas tardes(dias) a todos, mi problema es el siguiente: tengo que abrir varias ventanas modales desde diferentes botones, tengo la ventana modal creada con este codigo:

<div class="modal" id="modal1">
   <div class="modal-content">
      <div class="modal-header">
         asas
      </div>
      <div class="modal-body">
         <h3>Ssoy el Modal de Diseño Web</h3>
         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus eaque, fuga temporibus sequi magnam atque dolores placeat libero quasi tempore voluptates aliquid nobis dolore aperiam tempora ullam neque doloremque vero?</p>
      </div>
   </div>
</div>

El boton con el que debo abrir el modal es este:

<button class="modal-open" data-modal="modal1">Abrir</button>

y el JS que tengo es este:

var boton = document.querySelectorAll(".modal-open");

boton.forEach(function(btn){

    btn.onclick = function(){
        var modal = btn.getAttribute("data-modal");
        document.getElementById(modal).style.display = "block";
    };
});

Pero no hace nada, no carga ni muestra el modal. Alguien nota alguna falla, llevo horas dandole vuelta y no noto nada mal.

1
  • Pues si no le haz puesto ni unos estilos ni un comportamiento de modal por supuesto no se va a mostrar, donde esta el CSS que usas?, bajo que codigo de accion (javascript) manejas la apertura y el cierre del modal?, (el javascript que pusiste solo muestra el modal, pero nada mas), no hay opciones de cierre, que tal si colocas el CSS para poder nosotros nosotros reproducir tu modal, pues sin el CSS el modal no es un modal, es simplemente una estructura mas de la pagina web la cual no se mostrara como modal.
    – Layer
    Commented el 17 jul. 2020 a las 20:15

1 respuesta 1

2

Amigo, para hacer un modal debes de tener 3 cosas: CSS del modal y Javascript que abre el modal, asi como el HTML del modal. Ejemplo:

// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
body {
  font-family: Arial, Helvetica, sans-serif;
}
/* The Modal (background) */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <h2>Ejemplo Modal</h2>
  <!-- Trigger/Open The Modal -->
  <button id="myBtn">Abrir Modal</button>
  <!-- The Modal -->
  <div id="myModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
      <span class="close">&times;</span>
      <h3>Soy el Modal de Diseño Web</h3>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus eaque, fuga temporibus sequi magnam atque dolores placeat libero quasi tempore voluptates aliquid nobis dolore aperiam tempora ullam neque doloremque vero?</p>
    </div>
  </div>
</body>
</html>

3
  • Te dare un +1 por tu esfuerzo al responder la pregunta, puesto que funciona perfectamente, pero recuerda que normalmente no se responde a las preguntas a menos de que haya garantia de que hay un ejemplo minimo y verificable, el usuario tenia un ejemplo minimo, pero no verificable, pues este no contaba con el CSS (o no lo quizo poner), y tambien le faltan cosas a su codigo, que probablemente no hizo, realizarle nosotros el codigo no le genera ningun bien al OP, pues la idea es que el aprenda e investigue.
    – Layer
    Commented el 17 jul. 2020 a las 20:36
  • los estilos css los tenia, se que sin los css no hay modal, pero me doy cuenta que en los navegadores si veo la consola tengo un error: Uncaught TypeError: btn is null
    – Nicolas
    Commented el 17 jul. 2020 a las 20:39
  • 1
    @Nicolas, posdata, no somos adivinos, esa info es sumamente importante, considera para futuras preguntas colocar toda la informacion relevante, en esta pregunta te ha faltado dos cosas: colocar el CSS y colocar el error que obtienes.
    – Layer
    Commented el 17 jul. 2020 a las 20:48

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.