本文介绍了如何关闭新的html<对话框>通过单击其 ::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.
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<对话框>通过单击其 ::backdrop 标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！