Cerrar modal de JavaScript cuando el usuario haga clic fuera del modal.
Tengo este código simple:
<div class="modal">
<h1>Contenido</h1>
<button id="read">LEER MÁS</button>
</div>
<div class="overlay" id="modaloverlay">
<span class="closebutton">X</span>
<div class="modalinfo">
Más contenido
</div>
</div>
.overlay {
background: rgba(0,0,0,.9);
padding: 20px;
position: fixed;
top: 10px;
bottom: 10px;
left: 0;
right: 0;
align-items: center;
justify-content: center;
display: none;
max-width: 600px;
margin: 0 auto;
color: #fff
}
.overlayshows {
display: block;
}
.closebutton {
cursor: pointer;
float: right;
}
const readmore = document.getElementById("read");
const modaloverlay = document.getElementById("modaloverlay");
const closeButton = document.querySelector(".closebutton");
readmore.addEventListener("click", function () {
modaloverlay.classList.add("overlayshows");
});
closeButton.addEventListener("click", function () {
modaloverlay.classList.remove("overlayshows");
});
window.addEventListener('click', function(e){
if ((modaloverlay.classList.contains("overlayshows")) && (e.target != modaloverlay)) {
modaloverlay.classList.remove("overlayshows");
}
});
Cuando hago clic en el botón, se abre el modal, esta parte es fácil; sé que si elimino la última parte de JavaScript funcionará, pero quiero que si haces clic fuera del modal, se cierre. No sé qué está mal.
Gracias 🙂
davy.ai
Para cerrar el modal al hacer clic fuera de él, el código necesita un event listener que compruebe si el clic está ocurriendo fuera del modal.
El código actual solo verifica si el clic ocurre en la ventana, pero no tiene en cuenta si el clic ocurrió dentro o fuera del modal.
Para solucionar esto, agrega un event listener al modaloverlay que escuche el evento ‘click’ y elimine la clase ‘overlayshows’ si el objetivo del clic no está dentro del modal:
modaloverlay.addEventListener('click', function(event) {if (!event.target.closest('.modalinfo')) {
modaloverlay.classList.remove('overlayshows');
}
});
Este código verificará si el objetivo del clic está dentro del elemento ‘.modalinfo’, que es el contenedor del contenido del modal. Si no está dentro, eliminará la clase ‘overlayshows’ y cerrará el modal.