是 html 原生模态框，需调用 showmodal() 才显示并启用遮罩、焦点锁定；不支持自动点击 backdrop 关闭、esc 关闭、动画及居中，须 js 补全逻辑，兼容性限 safari 15.4+，旧版需降级处理。
HTML原生 <dialog></dialog> 怎么用才不白写
直接说结论：<dialog></dialog> 是 HTML 原生模态框，但不加 showModal() 就不会显示，也不自带遮罩层或焦点锁定——它只是个语义容器，不是开箱即用的“弹窗”。
常见错误是写了 <dialog></dialog> 标签但页面完全没反应，或者点了按钮没效果，本质是忘了 JS 控制。浏览器兼容性也要留意：Safari 15.4+ 才支持 showModal()，旧版 Safari 或 IE 完全不认。
-
<dialog></dialog>默认display: none，必须调用show()或showModal()才可见 -
showModal()会自动加 backdrop、禁用背景交互、聚焦第一个可聚焦子元素；show()不会 - 关闭时建议用
close()方法，而不是手动设open属性——否则可能丢失 backdrop 状态 - 别在
<dialog></dialog>外部监听click关闭，要用dialog::backdrop或监听close事件
为什么 showModal() 点击背景不关闭
这是设计行为，不是 bug。showModal() 的 backdrop 默认不可点击关闭，必须显式监听 click 并判断是否点在 backdrop 上，再调用 close()。
实际场景中，用户期望“点遮罩就关”，但原生 <dialog></dialog> 不提供这个逻辑。容易踩的坑是只监听 dialog 的 click，结果点内容区也触发关闭。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：监听
dialog的click，检查event.target === dialog（即点的是 backdrop 区域） - Safari 15.4–16.3 有 bug：
event.target在 backdrop 上可能是，需配合event.clientX/Y判断坐标是否在 dialog 外 - 不要给
dialog设pointer-events: none，会破坏原生 focus 锁定
<dialog></dialog> 的焦点管理为什么总失效
原生 <dialog></dialog> 调用 showModal() 后会尝试聚焦第一个可聚焦子元素（如 <button></button>、<input>），但如果第一个子元素是 <div> 或 <code>tabindex="-1"，就会静默失败，焦点留在背景页——用户按 Tab 键会跳出模态框。
这不是浏览器 bug，而是规范要求“只聚焦可交互元素”。开发中常忽略这点，导致键盘导航断裂。
- 确保
<dialog></dialog>内第一个可聚焦元素存在且未被disabled或hidden - 如果首元素是标题或描述文字，加
tabindex="-1"并在showModal()后手动.focus() - 避免在
open属性变化时用 CSS 动画延迟显示，会干扰焦点时机 - 测试时用键盘 Tab 切换，别只靠鼠标点
要不要用 <dialog></dialog> 替代第三方库
取决于项目约束。它轻量、语义正确、无障碍支持好（自动处理 aria-modal 和 inert），但缺失很多实用功能：没有动画过渡、不支持 ESC 外部关闭（需自己监听）、无宽度/位置控制、无嵌套模态框支持。
如果你的项目已用 React/Vue，或需要复杂交互（如拖拽、多层堆叠、自定义动画），原生 <dialog></dialog> 反而增加胶水代码。但如果是静态表单、确认弹窗、纯 HTML 页面，它比引入 20KB 的 modal 库更干净。
- ESC 关闭必须手动监听
keydown，检查event.key === 'Escape' - 没有内置居中逻辑，需用
margin: auto+width/max-width+position: absolute组合实现 - 多个
<dialog></dialog>同时 open 时，只有最后一个showModal()生效，前一个会被降级为show()
真正难的不是写出来，是把焦点、键盘、屏幕阅读器、动画、移动端点击穿透这些点都对齐——原生能力只给骨架，血肉得自己长。
