close html5 dialog by clicking outside of it

Question

I have implemented several html5 dialogs in a web page. I want to enable the user to click outside of the dialog in order to close it, instead of cluttering up the dialog with a close button or requiring an {escape} keypress. Many queries on this matter are for exotic js libraries but I want to use plain JS not jquery.

JS

// 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(); }

HTML

<!-- S. HALFHIDE -->
<div class = "generic_dialog_container">
<dialog class = "generic dialog" id = "S-HALFHIDE">

<p>Blah blah blah</p>

</dialog></div>
<!-- END S HALFHIDE -->

How can I do this?

Does this answer your question? [Can't close modal when I click outside of it](https://stackoverflow.com/questions/61426848/cant-close-modal-when-i-click-outside-of-it) — Tibrogargan, Oct 03 '21 at 00:55
Given that my div class and dialog class, a simple one-liner solution for detecting a click outside of those elements and invoking a close function is the cleanest most succinct solution. Writing a dozen or more lines of JS isn't really needed, is it? — verlager, Oct 03 '21 at 01:30
The problem you run into, verlager, is that the `dialog` element takes up the entirety of the window when it is in its open state. Therefore, **all clicks inside of the web page, after the modal is open, register as a click on the dialog element**, which explains You'd be in a FAR better position to write your own modal, given that the `dialog`element is not even supported in some still relevant browsers such as Firefox and Safari. — Marcus Parsons, Oct 03 '21 at 01:45
Does this answer your question? [How to close the new html tag by clicking on its ::backdrop](https://stackoverflow.com/questions/25864259/how-to-close-the-new-html-dialog-tag-by-clicking-on-its-backdrop) — aloisdg, Jul 14 '22 at 14:27

score 5 · Accepted Answer · answered Oct 03 '21 at 01:55

This caused me to look into the dialog element quite a bit. Just a forewarning, as I mentioned in my comments, the dialog element is lacking in support as its not supported by Safari or Firefox.

Here is a REPL you can run that contains the solution: https://replit.com/@heyitsmarcus/Dialog#index.html

But, I did find a solution here that works here on Stack Overflow: How to close the new html <dialog> tag by clicking on its ::backdrop

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();
    }
});

This is a very good solution because it references the dialog itself instead of making me write other code that references by ID 150 X. — verlager, Oct 03 '21 at 02:44
You should never have to do that. Even outside of this dialog element, always use classes to group together your elements. They are powerful! — Marcus Parsons, Oct 03 '21 at 03:40

close html5 dialog by clicking outside of it

JS

HTML

1 Answers1