单击对话框外部关闭 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 元素。只是一个预警，正如我在评论中提到的，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();
    }
});

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

close html5 dialog by clicking outside of it

javascript

dialog

JS

HTML