dialog.showModal()是唯一能激活模态行为的方法，它触发遮罩、焦点锁定、Esc关闭和Tab锁定；仅设open属性或调用show()无效，且需确保dialog为body直接子元素、避免父容器CSS干扰、手动处理点击遮罩关闭及焦点恢复。
dialog.showModal() 是唯一能激活模态行为的方法
写了 <dialog> 标签却看不到弹窗？不是浏览器问题，是没调用 showModal()。这个方法才是触发遮罩、焦点锁定、Esc 关闭、Tab 锁定的开关。光加 open 属性或写 dialog.show() 都不行——前者只是初始显示，不锁背景；后者压根没 backdrop，也不拦截 Tab。
常见错误包括：
- 脚本在 DOM 解析前执行，
document.querySelector('dialog')返回null，导致Cannot read property 'showModal' of null -
<dialog>嵌套在<main>或<div class="container">里，Safari 和部分 Chrome 版本下::backdrop渲染失败或错位 - 父容器设置了
transform、will-change或overflow: hidden，把弹窗裁掉或偏移出视口 - 手动调用
dialog.removeAttribute('open')，导致已打开的弹窗“消失”（实际是被浏览器判定为未激活）
点击遮罩层关闭必须手动监听，且 Safari 兼容性差
原生 <dialog> 的 showModal() 不提供点击 backdrop 自动关闭功能——这不是 bug，是规范明确不定义该行为。你得自己监听 click 并判断是否点在遮罩区域。
基础写法在 Chrome/Edge 可用：
立即学习“前端免费学习笔记（深入）”；
dialog.addEventListener('click', e => {
if (e.target === dialog) dialog.close();
});
但在 Safari 15.4–16.3 中，e.target 常为 body，不可靠。稳妥 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::backdrop 是伪元素，不能绑定事件，也不能读取状态；别给 dialog 设 pointer-events: none，否则焦点锁定失效。
表单提交后自动关闭并传值，只靠 method="dialog" 不够
想让表单按钮点击后自动关闭弹窗并带回值？可以，但细节决定成败：
- 必须用
<form method="dialog">，且内部按钮带value属性：<button value="confirm">确定</button> - 禁止
event.preventDefault()或onsubmit="return false"，否则默认关闭逻辑被拦截 -
dialog.returnValue在 Chrome/Firefox/Edge 中可用，但 Safari（截至 v17.6）始终返回空字符串，不能作为跨浏览器传值手段 - 关闭后焦点不会自动回到触发按钮，键盘用户会卡住，需手动调用
triggerBtn.focus()
样式和结构有硬性限制，别乱嵌套
<dialog> 的渲染依赖浏览器内置定位机制，对 DOM 位置和 CSS 非常敏感：
- ✅ 必须是
<body>的直接子元素：<body><dialog id="dlg"></dialog></body> - ❌ 禁止嵌套：
<main><dialog></dialog></main>或<div class="wrapper"><dialog></dialog></div>会导致 backdrop 失效、定位异常 -
::backdrop在 Firefox 中仅逻辑阻塞（无视觉遮罩），Chrome/Edge 111+、Safari 17.4+ 支持，但需手动加样式：dialog::backdrop { background-color: rgba(0,0,0,0.6); } - 不要用
dialog.hidden = true或dialog.style.display = 'none'控制显隐——这会破坏原生模态语义，导致 Tab 键穿透、close() 后焦点不归还
最易被忽略的一点：showModal() 会自动聚焦第一个可聚焦子元素（如 <button> 或 <input>），如果弹窗里没有可聚焦项，焦点可能落在 body 上，影响键盘操作体验。
