The below code only works for the first dialog (BOB JONES) and the second dialog (ROBERT ABREAU) will open but not close onclick outside the dialog. I will have 150 more dialogs of text associated with student photos of a chess grandmaster. So IDK if I can use an event listener as per closeDialog() to close the current open dialog. Maybe a solution would involve getElementsByClassName. And I could patch that into the js code below, and omit the "onclick = "closeDialog();" on each dialog.
What's a good 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 more
function closeDialog(dialogID) {
document.querySelector('dialog').addEventListener('click', function(e) {
if(!e.target.closest('div')) { e.target.close();}
});
}
Per your comment, the code you are looking for can be somewhere along these lines:
<!-- 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();
}
}
Just make sure that the IDs of your dialogs are unique.