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.
// 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 -->
How can I do this?
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();
}
});