<dialog>默认不渲染，必须调用showModal()激活；open属性仅控制可见性，show()无遮罩和焦点管理；表单需method="dialog"或preventDefault()防刷新；遮罩点击关闭需手动监听且兼容Safari旧版。
写了<dialog>却什么都没弹出来？不是代码错了，是它根本没被激活——原生dialog默认不渲染、不占布局、连getBoundingClientRect()都返回空值，必须显式调用showModal()才能真正“启动”。
为什么dialog写了也不显示
很多人把<dialog><p>内容</p></dialog>放进 HTML 就以为能弹，结果刷新页面一片空白。这不是 CSS 问题，而是浏览器压根没绘制它：dialog默认display: none且跳过整个渲染流水线。
-
open属性只控制初始状态（如<dialog open>），但不会加遮罩、不锁焦点、不响应 Esc，只是“可见浮层”，不是模态框 - 千万别写
dialog.open = true或dialog.style.display = 'block'——这绕过原生焦点管理，Tab 键直接穿透到背景页 - 脚本执行早于 DOM 加载会报
Cannot read property 'showModal' of null：把<script>放在</body>前，或用DOMContentLoaded包裹
showModal()和show()到底该用哪个
绝大多数场景下，只该用showModal()；show()几乎无实际用途，它不加遮罩、不拦截 Tab、不响应 Esc，仅适合 tooltip 类轻量提示。
-
showModal()自动创建::backdrop、禁用背景交互、聚焦第一个可聚焦子元素（如<button autofocus>）、支持 Esc 关闭 -
show()没有::backdrop，点击事件监听对它无效；若误用，用户点背景或按 Esc 都毫无反应 - Firefox 目前不渲染
::backdrop（仅逻辑阻塞），Chrome/Edge 111+、Safari 17.4+ 支持，但样式需手动补全
点击遮罩关闭必须手动监听，且 Safari 有兼容陷阱
showModal()生成的灰色遮罩（::backdrop）默认完全无交互逻辑——这不是 bug，是规范明确不定义“点背景关窗”行为。
立即学习“前端免费学习笔记（深入）”；
- 正确监听方式：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }); - Safari 15.4–16.3 存在 bug：点击遮罩时
e.target始终是body，需 fallback 判断坐标，例如e.clientX < dialog.getBoundingClientRect().left - 绝对不要写
dialog.addEventListener('click', () => dialog.close())——这会让点击内部按钮、输入框也触发关闭 - 不想点遮罩关闭？直接加
oncancel="event.preventDefault()"即可阻止默认关闭行为
表单提交后页面刷新，是因为漏了preventDefault()
在<dialog>里放<form>很常见，但直接点type="submit"按钮会触发表单默认提交，导致整页 reload——看起来像弹窗“闪退”，其实是页面刷新了。
- 最简方案：给
<form>加method="dialog"属性，提交后自动触发dialog.close()，不刷新页面，且设置dialog.returnValue - 需要异步提交（如
fetch）时，必须在submit事件中第一句就调用e.preventDefault()，再执行后续逻辑 - 别把关闭逻辑写在按钮的
onclick里——用户按回车提交会漏掉 - 注意
enctype：传 JSON 时需显式设为application/json，否则FormData在部分浏览器中行为不一致
真正难的不是写showModal()，而是确保它挂在body直系子级、内部有autofocus元素、标题带aria-labelledby、遮罩点击判断兼容 Safari 旧版、表单防刷新不漏边角——这些细节一漏，键盘用户、屏幕阅读器或 iOS 16.3 以下设备就直接不可用了。
