模态框处于打开状态
" />
可通过 CSS :modal 伪类配合 document.querySelector() 快速判断当前是否存在以模态方式打开的 元素，无需维护状态变量或监听事件。
可通过 css :modal 伪类配合 document.queryselector() 快速判断当前是否存在以模态方式打开的 元素，无需维护状态变量或监听事件。
在现代浏览器（Chrome 124+、Edge 124+、Firefox 126+、Safari 17.4+）中，当 元素通过 .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()打开的生效；.show()打开的非模态对话框不匹配该伪类； - 不支持旧版浏览器（如 Chrome activeModal 引用变量，配合
dialog.onclose和dialog.showModal()同步更新）； -
document.querySelector('dialog:modal')返回首个匹配的元素，若需获取全部已打开模态框，可使用document.querySelectorAll('dialog:modal')（但通常只需布尔判断即可满足需求）。
总结：:modal 是专为该场景设计的原生 CSS 伪类，语义清晰、性能高效，是检测模态 状态的首选方案。
