通过单击外部关闭 html5 对话框

Question

我已经在一个网页中实现了几个 html5 对话框。我想让用户单击对话框外部以关闭它，而不是使用关闭按钮或需要 {escape} 按键来弄乱对话框。关于这个问题的许多查询都是针对异国情调的 js 库，但我想使用纯 JS 而不是 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 -->

我该怎么做？

Answer 1

这让我对dialog 元素进行了大量研究。只是一个警告，正如我在 cmets 中提到的，dialog 元素缺乏支持，因为 Safari 或 Firefox 不支持它。

这是您可以运行的包含解决方案的 REPL：https://replit.com/@heyitsmarcus/Dialog#index.html

但是，我确实在这里找到了适用于 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();
    }
});