最可靠检测方式是'showModal' in HTMLDialogElement.prototype，旧版Safari虽支持<dialog>标签但不支持showModal()方法，需降级为<div role="dialog">并手动实现焦点锁、遮罩和可访问性。
直接用 <dialog> 是最干净的方案，但 Safari 15.4 之前不支持 showModal()，IE 完全不支持；不检测就上，生产环境必出问题。
怎么判断浏览器是否支持原生 <dialog> 模态行为
不能只查 <dialog> 标签是否存在，得验证方法可用性：
-
'showModal' in HTMLDialogElement.prototype是唯一可靠检测方式，document.createElement('dialog')成功不代表能模态显示 - 旧版 Safari（如 15.3）会创建
<dialog>元素，但调用showModal()报错TypeError: modal.showModal is not a function - 检测失败后必须降级：用
<div role="dialog" aria-modal="true">+ 手动控制display和inert属性 - 别在 CSS 里写
dialog { display: block }强制显示——原生<dialog>默认display: none，且只有调用方法才激活 backdrop 和焦点锁
点击遮罩关闭时为什么点到弹窗内部也关了
根本原因是没做事件目标校验，所有冒泡上来的 click 都被遮罩层捕获。原生 <dialog> 的 backdrop 不是独立 DOM 节点，而是伪元素 dialog::backdrop，无法直接绑定事件；而手动实现的遮罩层如果监听范围过大，就会误关。
- 正确做法：给遮罩层（比如
.modal-overlay）绑定click，并在 handler 中严格判断e.target === overlayEl - 绝对不要用
overlay.contains(e.target)或e.target.classList.contains('overlay')，子元素点击也会命中 - 如果用了 flex 居中布局（
top:0;left:0;right:0;bottom:0;display:flex），遮罩和弹窗是同级元素，这个判断才真正有效 - 移动端要换用
pointerdown替代click，避免 iOS Safari 的 300ms 延迟导致点击反馈卡顿
为什么滚动页面后模态框偏移或遮罩漏底
核心是定位方式错误：position: absolute 依赖最近的 position: relative 祖先，一旦祖先有 transform、overflow: hidden 或滚动，弹窗就失联；100vh 在 iOS Safari 滚动时会因地址栏收放重算高度，导致遮罩变短。
立即学习“前端免费学习笔记（深入）”；
- 遮罩层和模态框容器都必须用
position: fixed，且遮罩设inset: 0（等价于top:0;left:0;right:0;bottom:0） - 居中别用
transform: translate(-50%, -50%)+top:50%;left:50%组合——少写一个就错位；改用 flex：display: flex; align-items: center; justify-content: center; - 移动端 Safari 必须规避
height: 100vh，可用 JS 动态设置 CSS 变量：document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)，然后遮罩高设为calc(var(--vh) * 100) - 打开弹窗时务必加
document.body.style.overflow = 'hidden'，否则背景仍可滚动，用户可能拉出底部白边
键盘和屏幕阅读器用户为什么打不开/关不掉/切不出
只控制显隐不等于“模态”，可访问性缺失会让弹窗对残障用户完全不可用。原生 <dialog> 自带部分能力，但需补全关键链路。
- 打开后必须立刻
focus()到第一个可聚焦元素（如确认按钮），否则键盘用户 Tab 第一下会跳到地址栏 - 关闭时要恢复上一个聚焦元素，用
document.activeElement记录触发源，再el.focus()回去 - 必须监听全局
Escape键：document.addEventListener('keydown', e => e.key === 'Escape' && modal.close())，注意别用keyup（Safari 对 keyup 的 Escape 支持不稳定） - 焦点逃逸检测不能省：
modal.addEventListener('focusin', e => !modal.contains(e.target) && modal.focus())，把跳出的焦点拽回来 - 背景内容禁用要双重保险：既设
document.body.inert = true（Chrome/Firefox），也要退化为document.body.setAttribute('aria-hidden', 'true')（Safari）
真正难的不是让弹窗“出现”，而是让它在任意设备、任意交互方式下都“守规矩”：不漏背景、不丢焦点、不阻塞键盘、不骗屏幕阅读器。这些细节堆叠起来，才是生产级模态框的门槛。
