dialog标签默认不显示，必须调用showModal()才激活模态行为；仅设open属性仅初始可见但无遮罩、不锁焦点、不响应Esc；showModal()是唯一推荐方式，支持backdrop、焦点锁定和Esc关闭。
dialog 标签不会自动显示，写了就以为能弹出来——这是最常踩的坑。它默认 display: none，浏览器跳过布局和绘制，getBoundingClientRect() 都返回空值。真正控制显隐，必须靠 JavaScript 方法，不是 CSS 或属性切换。
为什么加了 open 属性还是不弹窗？
open 是布尔属性，仅影响初始渲染状态：写成 <dialog open> 可让对话框“可见”，但它依然不是模态的——没有遮罩层、不锁焦点、按 Esc 没反应、Tab 键能穿透到背景页。这不是 bug，是规范设计：模态行为（showModal()）和可见性（open）是两件事。
常见错误包括：
- 只写
<dialog></dialog>，没调用任何方法 → 完全不渲染 - 手动设置
dialog.open = false后试图再调showModal()→ 无效，open属性不参与模态控制 - 在 DOM 尚未加载完成时执行
dialog.showModal()→ 报错Cannot read property 'showModal' of null
showModal() 和 show() 到底该用哪个？
showModal() 是唯一推荐用于模态对话框的方式；show() 几乎无实际用途，仅适合悬浮提示类轻量场景。
立即学习“前端免费学习笔记（深入）”；
showModal() 会：
- 自动添加
dialog::backdrop并阻塞背景交互 - 聚焦第一个可聚焦子元素（如
<button>或<input>） - 拦截 Tab 键、响应 Esc 关闭、支持点击遮罩关闭（需手动监听）
show() 会：
- 不触发
::backdrop，背景仍可点击/滚动 - 不锁定焦点，Tab 键自由穿透
- 不符合 WCAG 模态语义，无障碍支持差
如何正确监听关闭并处理点击遮罩？
close 事件是统一出口，但点击遮罩关闭不是原生行为——规范明确不定义该交互，必须手动实现。
基础监听写法：
dialog.addEventListener('click', e => {
if (e.target === dialog) dialog.close();
});
但 Safari 15.4–16.3 存在 e.target 始终为 body 的 bug，需 fallback 判断坐标：
dialog.addEventListener('click', e => {
const rect = dialog.getBoundingClientRect();
if (
e.clientX < rect.left ||
e.clientX > rect.right ||
e.clientY < rect.top ||
e.clientY > rect.bottom
) {
dialog.close();
}
});
注意：dialog.close() 必须调用，不能直接 remove() 或设 display: none —— 否则焦点状态丢失、returnValue 不可读、close 事件不触发。
样式与兼容性最容易被忽略的点
dialog 的默认样式极不可靠：Chrome 加 backdrop-filter，Safari 渲染 ::backdrop 滞后甚至不渲染，Firefox 目前只做逻辑阻塞、不画遮罩层。
必须显式补全：
dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
}
dialog {
width: min(90vw, 480px);
margin: 2rem auto;
border: 1px solid #ccc;
border-radius: 6px;
padding: 1rem;
}
还有两个关键细节常被跳过：
- 没加
aria-labelledby或autofocus→ 屏幕阅读器无法识别标题，键盘用户首次聚焦位置不确定 - 表单内用
method="dialog"提交时，dialog.returnValue是字符串且只读一次，关掉就没了
