Usé un tutorial aleatorio para agregar una ventana emergente a mi página web. ¿Hay alguna manera de hacer que se cierre una ventana emergente cuando hace clic fuera de ella/hace clic en otra diferente?
Intenté agregar una identificación cerca de un div fuera de la ventana emergente, pero también cierra la ventana emergente cuando se hace clic dentro de la ventana emergente. ¿Puedo obtener ayuda?
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body style="text-align:center"> <h2>Popup</h2> <a class="show-cta" id="open" href="javascript:void(0)">Show</a> <!-- model popup start --> <div class="modal-container" id="modalContainer"> <div class="modal"> </div> </div> </body> </html>css emergente del modelo básico
<style> a.show-cta{ background-color: #ea1420; color: #fff; padding: 6px 15px; display: inline-block; border-radius: 0; text-transform: uppercase; font-weight: 550; font-size: 16px; margin-top: 15px; text-decoration: none; } .modal-container{ background-color: rgba(0, 0, 0, .3); display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; height: 100vh; width: 100%; pointer-events: none; opacity: 0; } .modal-container.show{ pointer-events: auto; opacity: 1; } .modal{ background-color: #fff; width: 85rem; height: 470px; box-shadow: 0 .2rem .4rem rgba(0, 0, 0, .2); } </style>Cómo eliminar la clase 'show' haciendo clic fuera de la ventana emergente.
<script> window.onclick=function(){ const open = document.getElementById('open'); const modalContainer = document.getElementById('modalContainer'); const close = document.getElementById('close'); ``` open.addEventListener('click', () => { modalContainer.classList.add('show'); }); close.addEventListener('click', () => { modalContainer.classList.remove('show'); }); } </script>