原生 <dialog> 标签虽可实现邮箱订阅弹窗，但 Safari 兼容性差：15.4 前不支持，iOS 存在焦点丢失、Esc 失效、backdrop 点击穿透等问题；showModal() 静默失败因需元素已挂载且非 display: none；须用 hidden、requestAnimationFrame 及 try/catch 降级；表单提交需禁用按钮、显式关闭并重置；样式上必设 dialog::backdrop 背景，手动管理焦点与可访问性；iOS 上常需 UA 检测 + CSS fallback。
<dialog> 标签确实能做邮箱订阅弹窗，但直接用它上线有明显风险：Safari 15.4 之前不支持，iOS 全系 Safari 仍存在关闭后焦点丢失、Esc 键失效、 backdrop 点击穿透等兼容性问题。如果你的用户里有大量 iPhone 用户，不建议直接依赖原生 <dialog> 实现关键转化路径。
为什么 <dialog> 的 showModal() 在 Safari 上会静默失败
这是最常踩的坑——调用 document.querySelector('dialog').showModal() 后页面没反应，控制台也无报错。根本原因是 Safari 对 <dialog> 的实现不完整：它要求元素必须已挂载到 DOM 且不在 display: none 或 visibility: hidden 状态下才能调用 showModal()；如果弹窗 HTML 是动态插入又立即调用，Safari 可能还没完成渲染流程就跳过了。
- 确保
<dialog>在页面初始 HTML 中存在（不要用 JS 动态innerHTML插入后再调用） - 避免给
<dialog>设置display: none，改用hidden属性控制初始隐藏 - 调用
showModal()前加一次requestAnimationFrame，让浏览器完成布局 - 务必包裹 try/catch，并 fallback 到
open = true或 CSS 显示逻辑
表单提交后如何正确关闭 <dialog> 并防重复提交
用户点“订阅”按钮后，如果只是 dialog.close()，在 Safari 中可能触发两次 submit 或关闭失败；更糟的是，网络请求未完成时用户反复点击，导致重复订阅。
- 提交瞬间禁用按钮：
button.disabled = true，并修改文案为“提交中…” - 成功回调里先
dialog.close()，再重置表单（form.reset()），否则下次打开还带着旧输入 - 失败时记得恢复按钮状态：
button.disabled = false，不然用户卡死 - 别用
dialog.addEventListener('close', ...)做清理——Safari 不触发该事件，改用显式调用后的同步逻辑
样式和可访问性绕不开的三个硬约束
原生 <dialog> 自带 display: none 和 inert 行为，但它的默认样式极简，且对键盘导航（如 Tab 键循环、Esc 关闭）的支持因浏览器而异。
立即学习“前端免费学习笔记（深入）”；
- 必须手动设置
dialog::backdrop背景色，否则 Safari 下 backdrop 透明不可点：dialog::backdrop { background: rgba(0,0,0,0.5); } - 确保弹窗内第一个可聚焦元素（如
<input type="email">）在打开后自动获得焦点，用dialog.addEventListener('aftertoggle', () => input.focus())，但注意 Safari 不支持aftertoggle，需降级为setTimeout(..., 0) - 关闭按钮必须是
<button type="button">，不能是<div onclick="dialog.close()">，否则屏幕阅读器无法识别可操作性
真正麻烦的不是怎么写出来，而是怎么让 <dialog> 在 iOS 上表现得像一个“正常弹窗”。很多团队最后都加了 UA 检测 + CSS fallback 弹层，只把原生 <dialog> 当作现代浏览器的增强体验。别低估 focus 管理和 backdrop 交互的碎片化程度——它们在真机上才暴露得最彻底。
