Encontré la solución al posicionamiento con modal recientemente cuando tuve un problema en un proyecto. Tenia un modal y cada vez que el usuario le daba click afuera, el modal no se cerraba.
En este proyecto utilizaba angular y el modal de angular material. La forma de manejar la visibilidad del modal era con un booleano.
La respuesta es sencilla. Por eso hoy les quiero traer una técnica que me enseñaron e iluminaron los dioses para compartirla contigo, querido lector.
Solución al posicionamiento con modal
Este tipo de problema suele ocurrir a menudo. Puedes revisar la documentación de MDN
agregar un overlay que ocupe todo el tamaño de la pantalla, se encuentre entre las capas del elemento padre y el modal, y colocarle una evento para indicar si esta presente o no.
La solución la hice con HTML, CSS y Javascript porque se puede resolver así, sin necesidad de un framework o librería y se puede aplicar de igual forma.
En el caso de prueba que cree, originalmente vamos a tener esto en el HTML:
<button type="button" id="open-modal" class="btn btn-modal"> Ábreme </button> <div id="modal" class="modal"> <header class="modal-header"> Soy un modal </header> <div class="modal-body"> <p>Este es el cuerpecito rico del modal XD</p> <button type="button" id="close-modal" class="btn btn-modal"> Cierrame </button> </div> </div>
Ahora, lo primero que tienes hacer es colocar un div en el HTML Este será el overlay.
<body> <button type="button" id="open-modal" class="btn btn-modal"> Ábreme </button> <div id="overlay" class="overlay"></div><!--overlay de nuestra solucion--> <div id="modal" class="modal"> <header class="modal-header"> Soy un modal </header> <div class="modal-body"> <p>Este es el cuerpecito rico del modal XD</p> <button type="button" id="close-modal" class="btn btn-modal"> Cierrame </button> </div> </div> </body>
Luego pasas al CSS, donde colocarás los estilos para que ocupe toda la pantalla, un fondo transparente y ubicarlo entre body y el modal.
.overlay {
display: none;
width: 100vw;
height: 100vh;
background: transparent;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.modal {
display: none;
width: 200px;
height: 180px;
background: cornflowerblue;
padding: 20px;
border-radius: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 3px #000;
z-index: 2;
}
Por ultimo en javascript, colocarás un evento en donde indiques cuándo el elemento esta activo o no, y colocarle estilos para ocultarlo o mostrarlo según su caso.
const btnOutModal = document.querySelector('#open-modal');
const btnInnerModal = document.querySelector('#close-modal');
const modal = document.querySelector('#modal');
const overlay = document.querySelector('#overlay');
const openModal = () => {
modal.style.display = "block";
overlay.style.display = "block";
}
const closeModal = () => {
modal.style.display = "none";
overlay.style.display = "none";
}
btnOutModal.addEventListener('click', openModal)
btnInnerModal.addEventListener('click', closeModal)
overlay.addEventListener('click', closeModal)
Puedes ver el código completo de la solución acá: Cómo salir fuera de un modal con Javascript .
¿Qué te ha parecido? ¿Qué otras soluciones tienes para abarcar el problema? Me gustaría saber tu opinión, cCuéntamelo en los comentarios y no olvides seguirme en mis redes sociales para más contenido.
Sigueme en mis redes sociales para más contenido