通过单击外部来关闭 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(); }

超文本标记语言

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