如何检测是否有模态<dialog>元素处于打开状态？

我有一个包含多个<dialog>元素的页面，通过showModal()方法将它们作为模态框打开。我希望通过JavaScript检测当前是否有任何一个模态框处于打开状态（因为某些事件处理程序不应在模态框打开时触发）。是否可以检测模态框是否处于打开状态？比如通过检查dialog::backdrop是否存在，或者以某种方式检查非模态内容的惰性状态？

可行的检测方法 #

1. 直接检查dialog元素的open属性 #

每个通过showModal()打开的<dialog>元素都会自动添加open属性，这是最直接高效的检测方式：

// 判断页面是否存在打开的模态框
const hasOpenModal = document.querySelector('dialog[open]') !== null;

if (hasOpenModal) {
  // 存在打开的模态框，执行对应逻辑
}

只要模态框通过showModal()或show()方法打开，就会自动带上open属性，关闭时该属性会被移除。

2. 实时监听模态框的状态变化 #

如果需要实时追踪模态框的打开/关闭状态，可以给所有<dialog>元素绑定事件，维护全局状态变量：

let isAnyModalOpen = false;

// 为所有dialog绑定事件
document.querySelectorAll('dialog').forEach(dialog => {
  dialog.addEventListener('open', () => {
    isAnyModalOpen = true;
  });
  dialog.addEventListener('close', () => {
    // 关闭后检查是否还有其他打开的dialog
    isAnyModalOpen = document.querySelector('dialog[open]') !== null;
  });
});

之后你可以随时通过isAnyModalOpen变量获取当前是否有模态框处于打开状态。

3. 关于dialog::backdrop的检测 #

不推荐通过dialog::backdrop来判断——因为它是CSS伪元素，无法直接通过JavaScript获取。虽然可以尝试检查dialog的计算样式，但这种方法的可靠性远不如直接检查open属性。

4. 检查非模态内容的惰性状态 #

当通过showModal()打开模态框时，浏览器会自动将非模态区域设置为inert（惰性状态），你可以通过检查document.body.inert或非模态容器的inert属性来判断，但同样，直接检查dialog的open属性是更简单可靠的方案。

内容的提问来源于stack exchange，提问作者Matija Sirk