如何检测模态<dialog>是否打开？

Question

我有一个包含多个

<dialog>

元素的页面，我使用它们的 showModal() 方法将其作为模式打开。

我想检测当前是否从 Javascript 打开它们中的任何一个（因为打开模式时不应触发某些事件处理程序）。是否可以检查模态当前是否打开？也许通过

dialog::backdrop

的存在或以某种方式检查非模态内容的惰性？

Answer 1

当对话框作为模态打开时，它会获得 CSS 伪类 :modal - 因此可以使用选择器进行查询：

document.querySelector("dialog:modal") === null; // No dialog is opened as modal.
document.querySelector("dialog:modal") !== null; // Some dialog is opened as modal.