必须调用showmodal()才能激活dialog模态行为；仅写html标签无效，需js控制显隐、css处理遮罩与定位，否则用户完全看不到弹窗。
直接说结论：index.html 里加模态框，不是“写个 dialog 标签就完事”，而是必须配 JS 控制显隐、CSS 管遮罩和定位，否则用户根本看不到它——哪怕结构完全正确。
为什么写了 <dialog></dialog> 却没反应
常见错误是只放了 HTML 标签，没调 showModal()。原生 <dialog></dialog> 默认 display: none，且不自动绑定任何事件。浏览器不会因为你写了它就主动弹出来。
- 必须用 JS 获取元素后手动调用
dialog.showModal()（不是show()）才能启用遮罩和焦点锁定 - Safari 15.4+ 才支持
showModal()；旧版 Safari、IE 完全无效，会静默失败 - 如果用了
show()，既无 backdrop，也不禁用背景交互，本质上只是个普通浮层 - 关闭必须用
dialog.close()，直接设open = false会导致 backdrop 残留或焦点异常
点背景（backdrop）不关模态框，怎么修
showModal() 的 backdrop 默认不可点击关闭——这是规范行为，不是 bug。想实现“点遮罩就关”，得自己监听并判断点击位置。
- 监听
dialog元素的click事件，检查event.target === dialog（即点的是 backdrop 区域） - Safari 15.4–16.3 有兼容性问题：点 backdrop 时
event.target可能是body，需配合event.clientX/Y判断坐标是否落在dialog外围 - 别给
dialog设pointer-events: none，这会破坏原生焦点锁定逻辑 - 不要在外部
document上监听 click 关闭，容易误触或漏判
多个按钮对应不同模态框，怎么避免 ID 冲突
硬编码 getElementById("modal-1") 在多模态场景下极易出错：新增一个就得多写三行 JS，变量名一错全挂。
- 统一用
class="modal-trigger"绑定触发按钮，通过data-target="modal-user"指向目标 ID - 模态框本身用
id="modal-user"+class="modal"，保持语义一致 - JS 中用
document.querySelectorAll(".modal-trigger")批量绑定，点击时读取dataset.target动态查 DOM - 避免全局变量，每个模态框的打开/关闭逻辑封装在事件回调内，互不干扰
内容滚动失效或遮罩层错位，CSS 哪些值不能乱动
模态框内容过长时，overflow-y: auto 不起作用，通常是因为父容器没限制高度，或者 position 层级被覆盖。
-
.modal必须设position: fixed，不能用absolute，否则滚动时遮罩会偏移 - 遮罩层（
.modal-overlay或dialog::backdrop）要确保z-index高于页面内容，但低于模态框主体 - 内容区需设
max-height（如80vh）+overflow-y: auto，仅靠height: 100%无法触发滚动 - 用
transform: translate(-50%, -50%)居中时，父容器不能有overflow: hidden，否则内容会被裁切
真正难的不是写出第一个模态框，而是当它要支持键盘导航、屏幕阅读器、多实例嵌套、动画过渡和旧浏览器降级时，那些藏在 tabindex、inert、focus() 调用时机里的细节——这些地方一漏，用户就卡住不动了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
