模态框处于打开状态 " />

可通过 CSS :modal 伪类配合 document.querySelector() 快速判断当前是否存在以模态方式打开的 元素，无需维护状态变量或监听事件。

可通过 css :modal 伪类配合 document.queryselector() 快速判断当前是否存在以模态方式打开的 <dialog></dialog> 元素，无需维护状态变量或监听事件。

在现代浏览器（Chrome 124+、Edge 124+、Firefox 126+、Safari 17.4+）中，当 <dialog></dialog> 元素通过 .showModal() 方法以模态方式打开时，该元素会自动匹配 :modal 伪类。这是目前最标准、最轻量的检测方式——它不依赖 DOM 结构遍历、不需监听 open/close 事件，也无需手动管理打开状态。

使用示例如下：

// 检测是否有模态对话框正在显示
function isAnyDialogModalOpen() {
  return document.querySelector('dialog:modal') !== null;
}

// 在事件处理前进行拦截（如阻止快捷键、滚动等）
document.addEventListener('keydown', (e) => {
  if (isAnyDialogModalOpen()) {
    // 模态框开启时，禁用全局快捷键（如 Ctrl+S）
    if (e.ctrlKey && e.key === 's') {
      e.preventDefault();
    }
    return;
  }
  // 正常处理逻辑...
});

// 或用于条件渲染/禁用操作
if (isAnyDialogModalOpen()) {
  console.log('当前有模态框打开，暂停后台任务');
} else {
  startBackgroundSync();
}

⚠️ 注意事项：

• :modal 仅对调用 .showModal() 打开的 <dialog></dialog> 生效；.show() 打开的非模态对话框不匹配该伪类；
• 不支持旧版浏览器（如 Chrome activeModal 引用变量，配合 dialog.onclose 和 dialog.showModal() 同步更新）；
• document.querySelector('dialog:modal') 返回首个匹配的 <dialog></dialog> 元素，若需获取全部已打开模态框，可使用 document.querySelectorAll('dialog:modal')（但通常只需布尔判断即可满足需求）。

总结：:modal 是专为该场景设计的原生 CSS 伪类，语义清晰、性能高效，是检测模态 <dialog></dialog> 状态的首选方案。