He implementado varios diálogos html5 en una página web. Quiero permitir que el usuario haga clic fuera del cuadro de diálogo para cerrarlo , en lugar de saturar el cuadro de diálogo con un botón de cierre o requerir que se presione la tecla {escape}. Muchas consultas sobre este asunto son para bibliotecas js exóticas, pero quiero usar JS simple, no jquery.
// HALFHIDE function openHALFHIDEdialog() { var dialogHALFHIDEsource_O = document.getElementById("S-HALFHIDE"); dialogHALFHIDEsource_O.showModal(); } function closeHALFHIDEdialog() { var dialogHALFHIDEsource_C = document.getElementById("S-HALFHIDE"); dialogHALFHIDEsource_C.close(); } <!-- S. HALFHIDE --> <div class = "generic_dialog_container"> <dialog class = "generic dialog" id = "S-HALFHIDE"> <p>Blah blah blah</p> </dialog></div> <!-- END S HALFHIDE -->¿Cómo puedo hacer esto?
Esto me hizo mirar un poco el elemento de dialog . Solo una advertencia, como mencioné en mis comentarios, el elemento de dialog carece de soporte ya que no es compatible con Safari o Firefox.
Aquí hay un REPL que puede ejecutar que contiene la solución: https://replit.com/@heyitsmarcus/Dialog#index.html
Pero encontré una solución aquí que funciona aquí en Stack Overflow: Cómo cerrar la nueva etiqueta html <dialog> haciendo clic en su :: fondo
dialog.addEventListener('click', function (event) { var rect = dialog.getBoundingClientRect(); var isInDialog=(rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width); if (!isInDialog) { dialog.close(); } });