El siguiente código solo funciona para el primer cuadro de diálogo (BOB JONES) y el segundo cuadro de diálogo (ROBERT ABREAU) se abrirá pero no se cerrará al hacer clic fuera del cuadro de diálogo. Tendré 150 diálogos más de texto asociado con fotos de estudiantes de un gran maestro de ajedrez. Así que IDK si puedo usar un detector de eventos según closeDialog() para cerrar el cuadro de diálogo abierto actual. Tal vez una solución implicaría getElementsByClassName . Y podría parchear eso en el código js a continuación y omitir "onclick = "closeDialog();" en cada cuadro de diálogo.
¿Qué es un buen plan?
<!-- BOB JONES --> <dialog id = "B-JONES" onclick = "closeDialog('B-JONES');"> <div class="test"> <p>Blah blah blah</p> </div> </dialog> <!-- END BOB JONES <!-- ROBERT ABREAU --> <dialog id = "R-ABREAU" onclick = "closeDialog('R-ABREAU');"> <div class="test"> <p>Blah blah blah</p> </div> </dialog> <!-- END ROBERT ABREAU -->... 150 más
function closeDialog(dialogID) { document.querySelector('dialog').addEventListener('click', function(e) { if(!e.target.closest('div')) { e.target.close();} }); }Según su comentario, el código que está buscando puede estar en algún lugar a lo largo de estas líneas:
<!-- BOB JONES --> <dialog id = "B-JONES" onclick = "closeDialog('B-JONES');"> <div class="test"> <p>Blah blah blah</p> </div> </dialog> <!-- END BOB JONES <!-- ROBERT ABREAU --> <dialog id = "R-ABREAU" onclick = "closeDialog('R-ABREAU');"> <div class="test"> <p>Blah blah blah</p> </div> </dialog> <!-- END ROBERT ABREAU -->JS
function closeDialog(dialogID) { let dialog = document.getElementById(dialogId); if (dialog) { dialog.close(); } }Solo asegúrese de que las ID de sus diálogos sean únicas.