tengo este codigo sencillo
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"); } }); .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; } <div class="modal"> <h1>Content</h1> <button id="read">READ MORE</button> </div> <div class="overlay" id="modaloverlay"> <span class="closebutton">X</span> <div class="modalinfo" > Morecontent </div> </div>Cuando hago clic en el botón, se abre el modal, esta parte es fácil; Sé que si elimino la última parte de js funcionará, pero quiero que si haces clic en el modal, el modal se cierre, no sé qué está mal. Gracias :)
Esta solución crea un singleton modal para facilitar la gestión del ciclo de vida del componente. También utiliza la delegación de eventos para facilitar la gestión de eventos. El problema clave con su solución no fue evitar que el evento de clic modal se propagara.
const modal = { CLASSES: { SHOW: 'overlayshows', CLOSE_BUTTON: 'closebutton', MODAL: 'modaloverlay', READ: 'read' }, isVisible: false, el: document.getElementById("modaloverlay"), initialize() { modal.addEvents(); }, show() { modal.el.classList.add(modal.CLASSES.SHOW); modal.isVisible = true; }, hide() { modal.el.classList.remove(modal.CLASSES.SHOW); modal.isVisible = false; }, addEvents() { modal.removeEvents(); modal.el.addEventListener('click', modal.eventHandlers.onModalClick); window.addEventListener('click', modal.eventHandlers.onWindowClick); }, removeEvents() { modal.el.removeEventListener('click', modal.eventHandlers.onModalClick); window.removeEventListener('click', modal.eventHandlers.onWindowClick); }, eventHandlers: { onModalClick(event) { event.stopImmediatePropagation(); if (!event.target) { return; } if (event.target.classList.contains(modal.CLASSES.CLOSE_BUTTON)) { modal.hide(); } }, onWindowClick(event) { if (event.target.classList.contains(modal.CLASSES.READ)) { modal.show(); } else { modal.hide(); } } } } modal.initialize();W3schools tiene un buen tutorial sobre modales: https://www.w3schools.com/howto/howto_css_modals.asp
El código es el siguiente para cerrar un modal si un usuario hace clic fuera de él:
// When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }