dialog 元素不加 open 属性就不可见
浏览器原生 <dialog> 默认是隐藏的，连 display 都不是 block —— 它用的是 display: none，且不响应 click 或 focus。很多人写完 <dialog><p>内容</p></dialog> 刷新页面却看不到任何东西，第一反应是 CSS 没生效，其实只是忘了“开门”。
- 必须显式添加
open属性才能让对话框可见：<dialog open>...</dialog> -
open是布尔属性，写成open=""、open="open"或单纯open效果一样 - 用 JS 控制时，推荐用
dialog.showModal()或dialog.show()，而不是手动增删open属性 —— 后者不会触发模态行为（比如背景失焦、Esc 关闭）
showModal() 和 show() 的关键区别在哪
两者都让 <dialog> 可见，但行为完全不同：前者是真正意义上的模态对话框，后者只是“浮层”，没拦截能力。
-
dialog.showModal()：- 自动禁用背景页面交互（点击/Tab 键无法离开 dialog）
- 按 Esc 自动关闭（除非被
event.preventDefault()阻止） - 聚焦到 dialog 内第一个可聚焦元素（或 fallback 到 dialog 自身）
-
dialog.show()：- 仅显示，不阻止背景操作
- 不响应 Esc，也不管理焦点
- 适合轻量提示、工具提示类场景，不是“对话框”而是“弹出层”
关闭 dialog 的三种可靠方式
别只依赖 <button onclick="dialog.close()"> —— 它容易漏掉 Esc 和 backdrop 点击，导致用户卡住。
- 监听
close事件（非click）来清理逻辑：dialog.addEventListener('close', () => { /* 清理表单、重置状态 */ }) - 为 backdrop 添加关闭逻辑（需注意：只有
showModal()才有 backdrop）：dialog.addEventListener('click', e => e.target === dialog && dialog.close()) - 捕获 Esc 并允许关闭（默认已支持，但若调用了
preventDefault()就得自己恢复）
常见错误：给 dialog 内部按钮绑定 onclick="dialog.remove()" —— 这会彻底移除 DOM 节点，下次再调 showModal() 就报错 Failed to execute 'showModal' on 'HTMLDialogElement': The element is not in a Document.'
立即学习“前端免费学习笔记（深入）”；
兼容性与降级必须考虑 Safari 和旧 Chrome
<dialog> 在 Safari 15.4+ 才支持 showModal()，更早版本只认 show()；Chrome 37+ 支持但需开启 flag，稳定支持从 Chrome 97 开始。这意味着不能假设所有用户都有完整能力。
- 检测支持：用
'showModal' in HTMLDialogElement.prototype判断是否可用模态功能 - 降级方案别用 polyfill 库（如 dialog-polyfill 已停止维护），改用 CSS + JS 模拟 backdrop 和 focus trap 更可控
- 特别注意：Safari 中
dialog::backdrop样式支持不全，比如background: rgba(0,0,0,0.5)可能失效，建议用伪元素或额外 div 模拟 backdrop
最易被忽略的一点：dialog 的 z-index 是浏览器内置的，你写的 CSS z-index 不会覆盖它 —— 模态 dialog 总在顶层，非模态的才受 CSS 层叠影响。这点在调试遮挡问题时经常让人困惑几小时。
