<dialog> 的 open 属性仅控制可见性，不触发模态行为；完整模态需调用 showModal()，它自动居中、加遮罩、锁焦点、响应 Esc；show() 无遮罩且背景可交互；method="dialog" 可使表单提交后自动关闭弹窗。
dialog 的 open 属性不是“默认弹窗开关”
写了 <dialog open> 页面一加载就显示内容，很多人以为这就是“自动弹出”，其实它只让元素从 display: none 变成可见，**不带遮罩、不限制滚动、不锁焦点、不响应 Esc 键**。它本质上等价于一个带 hidden 属性被移除的 <div>，和模态行为完全无关。
常见错误现象：
-
dialog.open = true在 DOM 尚未挂载时执行 → 报错Cannot read property 'showModal' of null - 用 CSS 强行设
dialog { display: block }→ 完全无效，浏览器硬编码只认open或 JS 方法 - 用户按 Esc 没反应、点击背景页仍可操作 → 因为根本没调用
showModal()
showModal() 和 show() 的关键区别
showModal() 是唯一能触发完整模态行为的方法：自动居中、注入 ::backdrop、禁用背景交互、锁定 Tab 焦点流、监听 Esc 关闭。而 show() 几乎不用——它不加遮罩、背景可穿透、Tab 键自由切换，实际用途极窄（比如悬浮工具面板）。
使用场景与注意事项：
立即学习“前端免费学习笔记（深入）”；
- 必须确保
<dialog>已挂载到<body>直接子级，否则 Safari 可能渲染异常 -
showModal()会自动聚焦第一个autofocus元素；没设的话，焦点可能落在 body 上，影响可访问性 - 调用
show()后再监听点击 backdrop 关闭是无效的 —— 它压根不生成::backdrop - 想兼容 Safari 15.4–16.3？点击 backdrop 时
e.target可能是body，得 fallback 判断坐标
form method="dialog" 是表单提交不刷新的关键
在 <dialog> 里放 <form> 很常见，但默认提交会整页 reload，导致“弹窗闪退”。最简解法就是给 form 加 method="dialog" 属性。
这样做的效果：
- 提交后自动触发
dialog.close() - 设置
dialog.returnValue为提交按钮的value（如<button value="confirm">确定</button>） - 无需
e.preventDefault()，也不用写额外关闭逻辑
注意：method="dialog" 仅对同步提交生效；若需 fetch 异步提交，必须手动 e.preventDefault() + dialog.close()，且别把关闭逻辑只绑在按钮 onclick 上——用户回车提交会漏掉。
样式和无障碍不能只靠默认值
<dialog> 几乎没有跨浏览器一致的默认样式：Chrome 圆角白底带阴影，Firefox 是半透明块，Safari 默认不居中，且在父元素有 transform 或 will-change 时可能直接不渲染。
必须手写的几项：
- 居中重置：
dialog { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } - 遮罩定制：
dialog::backdrop { background: rgba(0,0,0,0.6); }（注意 Safari 旧版需额外处理） - 无障碍补全：
aria-labelledby关联标题，autofocus指向首个可交互控件，role="dialog"显式声明（虽然原生已隐含，但部分读屏器需要）
真正麻烦的从来不是写法，而是 Safari 对 transform 父容器的渲染 bug、旧版对 ::backdrop 事件冒泡的缺失，以及无 JS 场景下 open 属性只能“看得见却用不了”的割裂感——这些细节不踩一遍很难信。
