Safari 不支持原生 dialog API，需检测 'showModal' in HTMLDialogElement.prototype 后降级为 div 实现；居中用 position: fixed + transform；需手动管理 backdrop、ESC 关闭、焦点循环及语义可访问性。
dialog 标签在 Safari 中默认不生效
直接写 <dialog> 标签，Chrome 和 Edge 能正常显示并用 showModal() 控制，但 Safari（包括 iOS 16.4+）对 <dialog> 的支持仍不完整：它会渲染内容，但不遮罩背景、不阻止底层交互、open 属性无效，showModal() 抛出 NotSupportedError。这不是 CSS 能修的，是底层 API 缺失。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须检测原生支持：
if ('showModal' in HTMLDialogElement.prototype)，否则降级为 div + 手动管理焦点和 backdrop - 不要依赖
open属性做初始状态控制——Safari 下设了也白设 - 避免在未检测前调用
close()或showModal()，否则 Safari 会静默失败或报错
让 dialog 真正居中且响应式的关键 CSS
原生 <dialog> 默认是 inline-level，且没有 margin auto 居中逻辑；它靠浏览器内置样式定位，但各引擎实现不一致。纯靠 margin: auto 在 flex 容器里也不可靠。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
<dialog>显式设position: fixed+top: 50%+left: 50%+transform: translate(-50%, -50%)，这是最稳定居中方式 - 宽度用
min(90vw, 480px)替代固定值，避免小屏溢出或大屏过窄 - 加
max-height: 80vh和overflow-y: auto，防止内容撑爆视口 - 别忘了
backdrop伪元素样式：dialog::backdrop { background: rgba(0,0,0,0.5); }，否则 Safari 降级时容易漏掉遮罩
点击 backdrop 关闭弹框的兼容写法
原生 <dialog> 点击 backdrop 默认关闭，但这个行为在 Safari 降级方案里不会自动存在；而且 Chrome 120+ 开始，若 <dialog> 内部有 event.stopPropagation()，可能意外阻断 backdrop 点击。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 监听
click事件时，检查event.target === dialogEl（即点的是 dialog 根元素本身），而不是event.target.tagName === 'DIALOG' - 降级方案中，用
pointer-events: none给 backdrop 层，再单独给 dialog 内容层设pointer-events: auto，避免误触底层 - 禁用 ESC 关闭？别直接
preventDefault()键盘事件——要先event.key === 'Escape'且dialogEl.open为 true 时才处理
focus 管理与键盘可访问性容易被忽略的细节
原生 <dialog> 自动聚焦第一个可 tab 元素，但 Safari 不支持；手动聚焦又常忽略「关闭后恢复原焦点」和「Tab 键循环限制」，导致残障用户卡死在弹框里。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 打开弹框前，用
document.activeElement记录上一焦点元素，关闭后.focus()回去 - 监听
keydown，当event.key === 'Tab'时，用dialogEl.querySelectorAll('button, [href], input, select, textarea, [tabindex]')获取所有可聚焦项，手动控制循环 - 确保弹框内至少有一个
tabindex="0"元素（比如确认按钮），否则 Safari 降级后首次打开可能完全无法聚焦
真正难的不是写出来，而是让 showModal() 和 close() 在所有场景下都触发预期的视觉反馈、焦点转移和语义播报——尤其当页面已有自定义滚动容器或 body { overflow: hidden } 时，dialog 的 backdrop 遮罩和 body 锁定逻辑很容易互相打架。
