如何关闭新的html<对话框>通过单击其 ::backdrop 标记

2022-01-15 00:00:00 google-chrome dialog pseudo-element html opera

我没有找到任何内置的解决方案或解决方法来通过单击其背景 (::backdrop) 来关闭 html5 元素，尽管它显然是一个基本功能.

I didn't find any built in solution or workaround for closing the html5 element by clicking on its background(::backdrop), although it's clearly a basic functionality.

推荐答案

可以使用对话框边界矩形检测背景点击.

Backdrop clicks can be detected using the dialog bounding rect.

var dialog = document.getElementByTagName('dialog');
dialog.showModal();
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();
    }
});

相关文章