标签需调用showmodal()才实现真模态（含遮罩、禁背景交互），show()仅为普通浮层；未入dom、未设open、shadow dom内调用或css重置均致点击无反应，safari 15.4+才支持showmodal()。
<dialog></dialog> 标签本身不默认模态，必须配合 showModal() 方法才能实现真正阻断用户操作的模态框；直接用 show() 只是普通浮层，无遮罩、不拦截背景交互。
为什么 <dialog></dialog> 点击没反应？
常见原因：元素未被添加到 DOM 主文档流，或未调用正确方法触发。
-
<dialog></dialog>默认display: none，不调用show()或showModal()不会渲染 - 若在 Shadow DOM 内使用，
showModal()会抛出DOMException: The element is not in a top layer. - 未设置
open属性时，即使 JS 调用成功，也可能因 CSS 重置（如全局dialog { display: block }）导致样式错乱
showModal() 和 show() 的关键区别
二者行为差异直接影响是否“模态”：
-
showModal()：创建真模态层，自动加半透明遮罩（::backdrop），禁用背景焦点，按Esc自动关闭 -
show()：仅显示弹层，无遮罩、不阻止背景点击/聚焦，需手动处理交互隔离 - 关闭方式不同：
showModal()下点击遮罩、按Esc或调用close()均可关闭；show()必须显式调用close()
如何让 <dialog></dialog> 支持点击遮罩关闭？
原生 showModal() 已支持点击 ::backdrop 关闭，但需注意：
立即学习“前端免费学习笔记（深入）”；
- 必须确保
<dialog></dialog>是顶层元素（不在transform、position: fixed等影响堆叠上下文的父容器内） - 不能给
::backdrop设置pointer-events: none，否则点击无效 - 若自定义关闭按钮，建议监听
close事件而非click，避免重复触发：
const modal = document.querySelector('dialog');
modal.addEventListener('close', () => {
console.log('用户已关闭模态框，无论通过 Esc、遮罩还是 close()');
});
浏览器兼容性仍是硬约束：Safari 直到 15.4 才支持 showModal()，旧版需降级方案；且所有浏览器都不支持 <dialog></dialog> 在 <iframe></iframe> 内调用 showModal() —— 这些限制往往比样式更早卡住落地。
