使用 dialog 标签配合 showmodal() 是最简方案，但需设置 width（如 min(90vw,480px)）、max-height（如 80vh）及 overflow-y: auto 才能正确居中、可滚动且不破坏布局；需显式定义 dialog::backdrop 样式，禁用 margin/auto/transform 居中；不支持浏览器需 polyfill 并手动实现焦点陷阱、遮罩和滚动锁定。
直接用 dialog 标签 + showModal() 是最省事的方案，但必须配对正确的 CSS 才能真正居中、可滚动、不崩 layout。纯 div 模拟也能做，但焦点管理、Esc 响应、backdrop 渲染这些得自己补全。
dialog 元素必须设 width 和 max-height 才能居中
原生 dialog 默认 width: fit-content，在 Safari 下会贴左上角，甚至不触发 ::backdrop。不设宽高，showModal() 仍能执行，但视觉上就是错位或溢出。
-
width推荐用min(90vw, 480px)，兼顾移动端和桌面宽度 -
max-height必须设（如80vh），否则长内容直接撑出视口 - 禁用
margin: auto或top/left/transform居中——Safari 会丢掉::backdrop或滚动异常 - 用
position: relative而非absolute或fixed
dialog::backdrop 的样式不能靠继承
::backdrop 是伪元素，不继承父级 opacity，但很多人误写 background: rgba(0,0,0,0.5) 失效，其实是被其他规则覆盖了。
- 必须显式声明
dialog::backdrop { background: rgba(0, 0, 0, 0.5); } - 不能只写
background-color，Safari 旧版需要完整rgba() - 如果 backdrop 不显示，先检查是否漏写了
showModal()——show()不创建 backdrop - 不要给
dialog设z-index：它天然层级高于页面，加了反而可能被遮住
内容区必须手动加 overflow-y: auto
dialog 本身不处理内部滚动，哪怕设了 max-height，内容超长时也会溢出并推挤页面，不是“自动截断+可滚”。
- 在
dialog > *或具体内容容器上加overflow-y: auto - 避免用
overflow: hidden，否则键盘用户 Tab 到底部就卡死 - 滚动条宽度会影响 padding 计算，建议统一用
scrollbar-gutter: stable预留空间 - 如果内容含表单，确保第一个
<input>或<button></button>在打开后获得焦点（需 JS 调用.focus()）
不支持 dialog 的浏览器要 fallback 到 div 结构
IE 全系、Safari ≤ 15.6、部分安卓 WebView 会直接忽略 dialog 标签，showModal() 报 TypeError。polyfill（如 dialog-polyfill）能补 API，但样式和焦点逻辑仍要手写。
- 检测支持性：
if (!('showModal' in HTMLDialogElement.prototype)) - fallback 时，遮罩层必须用
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh，不能只靠100% - 禁止页面滚动要靠
document.body.style.overflow = 'hidden'，关闭时记得恢复 - 必须手动实现焦点陷阱：监听
Tab键，把焦点限制在模态框内可聚焦元素之间
真正难的不是让框弹出来，而是让它在各种尺寸、各种输入方式（鼠标/键盘/触控）、各种读屏器下都“不破功”。比如 Safari 的 transform 居中 bug、iOS 上的滚动穿透、NVDA 对 aria-modal 的解析差异——这些细节没压住，模态框就只是个会动的 div 而已。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
