）处于打开状态
" />
通过 CSS :modal 伪类选择器可精准判断当前是否存在以模态方式打开的 元素，无需轮询或监听事件，兼容现代浏览器且语义清晰。
通过 css `:modal` 伪类选择器可精准判断当前是否存在以模态方式打开的 `
在使用原生 <dialog></dialog> 元素构建模态交互时，常需在全局事件（如 keydown、click 或自定义表单提交逻辑）中规避模态层开启期间的干扰行为。例如：用户打开模态框后，不希望背景点击关闭主页面导航，或阻止快捷键触发非模态操作。此时，最直接、高效且符合标准的检测方式是利用浏览器原生支持的 :modal CSS 伪类。
:modal 伪类专为处于模态状态（即通过 .showModal() 打开）的 <dialog></dialog> 元素设计，仅当对话框实际显示为模态（含 backdrop、捕获焦点、阻断底层交互）时才匹配。它不匹配调用 .show() 的非模态对话框，也不受 open 属性是否为 true 的误导（因为 open 仅表示可见性，不反映模态行为）。
✅ 推荐检测方法如下：
// 检查是否有任意 <dialog> 正在以模态方式打开
function isAnyDialogModalOpen() {
return document.querySelector('dialog:modal') !== null;
}
// 使用示例
document.addEventListener('keydown', (e) => {
if (isAnyDialogModalOpen()) return; // 模态框开启时跳过处理
if (e.key === 'Escape') {
// 自定义退出逻辑（仅在无模态框时生效）
handleAppExit();
}
});⚠️ 注意事项：
- 浏览器兼容性：
:modal已被 Chrome 97+、Edge 97+、Firefox 112+ 和 Safari 15.4+ 原生支持；旧版浏览器需降级方案（如维护全局状态变量或监听dialog的toggle/close事件并手动追踪）。 - 不要混淆
dialog[open]与dialog:modal：前者仅表示 DOM 中存在open属性（可能由.show()触发），后者才真实反映模态栈状态。 - 多个
<dialog></dialog>同时打开时，document.querySelector('dialog:modal')返回第一个匹配项，但布尔判断已足够满足“是否存在”的需求；如需获取全部，可用document.querySelectorAll('dialog:modal')。
综上，:modal 是语义正确、性能优异、零侵入的检测方案——它由浏览器引擎直接维护，无需手动同步状态，是现代 Web 开发中处理 <dialog></dialog> 模态逻辑的理想基石。
