如何关闭新的html<对话框>点击其背景标签 [英] How to close the new html <dialog> tag by clicking on its ::backdrop
问题描述
我没有发现任何内置的解决方案或解决方法，通过单击其背景（:: 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.使用对话框边界矩形可以检测背景点击。 document.getElementByTagName（ '对话'）;
dialog.showModal（）;
dialog.addEventListener（'click'，function（event）{
var rect = dialog.getBoundingClientRect（）;
var isInDialog =（rect.top< = event.clientY&& amp ; event.clientY <= rect.top + rect.height
& rect.left< = event.clientX&& event.clientX< = rect.left + rect.width）;
if（！isInDialog）{
dialog.close（）;
}
}）;
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();
}
});
这篇关于如何关闭新的html<对话框>点击其背景标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
