HTML dialog、Popover API 和普通浮层有什么区别？

简化版

dialog.showModal() 用于需要阻断页面交互的模态任务，浏览器会把它放进 top layer、让背景 inert 并提供 ::backdrop；Popover API 适合菜单、提示等非模态浮层，支持轻触关闭和声明式触发。普通定位 div 控制最自由，但焦点、层级、关闭行为和可访问语义都要自行实现。

详细版

<dialog> 既可通过 show() 非模态打开，也可通过 showModal() 模态打开；模态模式应管理初始焦点、关闭后焦点归还、取消事件和表单结果。不能只靠设置 open 属性模拟 showModal()，因为它不会获得完整的模态行为。

带 popover 属性的元素通过 showPopover()、hidePopover()、togglePopover() 或 popovertarget 控制。默认 popover="auto" 支持点击外部或 Esc 轻触关闭；manual 由应用完全控制，更适合通知等不应自动消失的内容。

两者进入 top layer 后不会被普通 z-index 压住，但仍需根据交互是否阻断、语义和焦点模型选择，不能把所有下拉菜单都做成 dialog。

完整版教学

一、浮层难点不只是把元素盖在上面

传统浮层常用 position: fixed 与很大的 z-index，这只能解决部分视觉位置。完整组件还要处理层叠上下文、键盘焦点、Esc 关闭、点击外部、滚动、关闭后的焦点归还以及读屏语义。

浮层正确性 = 视觉层级 + 触发/关闭规则 + 焦点模型 + 可访问语义

如果页面有 5 套组件库，各自把 z-index 提高一个数量级，最终可能出现 99999 仍压不过 transform 创建的局部层叠上下文。平台原生 API 的价值，是把常见行为和 top layer 能力交给浏览器。

二、Top layer 是普通层叠体系之外的展示层

Top layer 由浏览器管理，处于文档所有普通层叠上下文之上。模态 dialog、打开的 popover 和全屏元素都可进入该层，因此祖先的 overflow: hidden、transform 和普通 z-index 不会像传统浮层那样把它困住。

dialog::backdrop {
  background: rgb(15 23 42 / 55%);
  backdrop-filter: blur(2px);
}

Top layer 中的元素仍按进入顺序管理前后关系，不是设置 z-index: 2147483647。::backdrop 是浏览器为相关顶层元素生成的伪元素，可单独设计遮罩，但不应靠透明遮罩偷偷拦截不相关操作。

三、Dialog 适合必须先处理的模态任务

删除确认、付款步骤和关键权限说明会暂时阻断背景交互，适合 showModal()。浏览器会让文档其余部分不可交互，并把焦点带入对话框；关闭时应用还应把焦点送回原触发元素。

<button id="remove">删除项目</button>
<dialog id="confirm">
  <form method="dialog">
    <h2>确认删除？</h2>
    <button value="cancel">取消</button>
    <button value="confirm">删除</button>
  </form>
</dialog>

remove.onclick = () => confirm.showModal();
confirm.addEventListener('close', () => {
  if (confirm.returnValue === 'confirm') deleteItem();
  remove.focus();
});

method="dialog" 的按钮可以设置 returnValue 并关闭对话框，不发起网络提交。若用户关闭前停留 8s，背景所有交互也被阻断 8s，所以非关键提示不应滥用模态模式。

四、Popover 适合轻量、非模态的临时内容

下拉菜单、帮助气泡和操作面板通常不需要冻结整个页面。popover="auto" 默认支持轻触关闭：点击外部或按 Esc 会关闭，并且同组自动 popover 通常只保持一个打开。

<button popovertarget="user-menu">账户</button>
<nav id="user-menu" popover>
  <a href="/profile/">个人资料</a>
  <button type="button">退出</button>
</nav>

声明式关联减少了只为开关状态而写的 JavaScript。popover="manual" 不会自动轻触关闭，应用必须提供清晰关闭入口；用它展示错误通知时，还要考虑消息是否被辅助技术宣布。

五、两套 API 的焦点与关闭模型不同

模态 dialog 的背景变为 inert，用户必须先处理或关闭；popover 默认不阻断背景，焦点是否进入浮层取决于触发方式和内部内容。把非模态菜单做成 dialog 会让简单导航变成强制任务，把危险确认做成可轻触关闭的 popover 又可能导致误操作。

维度	模态 dialog	auto popover	普通 div 浮层
背景交互	阻断	保留	自行实现
Top layer	是	是	否，除非配合其他 API
Esc 关闭	原生取消行为	原生轻触关闭	自行监听
点击外部关闭	通常自行决定	默认支持	自行实现
典型场景	确认、关键流程	菜单、提示面板	特殊兼容或高度定制

选择时先画交互状态图，明确打开、确认、取消、外部点击和 Esc 分别转向哪里。API 只是执行模型，不能替产品决定正确流程。

六、原生能力仍需要完整的可访问设计

对话框应有可感知标题，复杂说明可通过 aria-describedby 关联；打开后初始焦点不一定放在第一个按钮，长内容常应先聚焦静态标题或安全的取消按钮。破坏性操作不能默认把焦点落在“删除”上。

<dialog aria-labelledby="dialog-title" aria-describedby="dialog-desc">
  <h2 id="dialog-title" tabindex="-1">删除账户</h2>
  <p id="dialog-desc">删除后 30 天内可以恢复。</p>
  <!-- 操作按钮 -->
</dialog>

假设确认键与取消键相距 160px，键盘用户不受鼠标距离影响，但初始焦点位置会直接决定一次 Enter 的结果。焦点策略应按风险设计，并在关闭、路由切换和嵌套浮层时测试归还位置。

心法：先判断背景是否必须失效——必须失效选模态 dialog，不必失效且需要轻触关闭优先考虑 popover。

七、常见误区与追问

误区：给普通 div 设置极大 z-index 就等于 top layer。 局部层叠上下文和裁剪仍可能限制它，top layer 是浏览器管理的独立层。
误区：直接写 <dialog open> 等同 showModal()。 open 只表示非模态显示，不会自动让背景 inert 或进入完整模态流程。
误区：原生 dialog 会自动决定最合理的焦点。 浏览器提供基础机制，初始焦点和关闭后归还仍需按任务设计。
追问：Popover 能否做模态框？ 它的核心模型是非模态临时浮层；需要阻断背景时应使用模态 dialog。
追问：嵌套多个浮层要注意什么？ 要明确 top layer 顺序、Esc 关闭目标、焦点归属和触发元素是否仍存在。
追问：如何做兼容降级？ 依据支持矩阵用特性检测或成熟 polyfill，并让基础内容在无脚本时仍可访问。

八、加强记忆

把浮层分成“必须先处理”和“随时可离开”两类：前者用 showModal() 获得背景 inert、top layer 和模态取消模型，后者用 Popover API 获得顶层显示、声明式触发和轻触关闭。普通 div 只在兼容或高度定制确有需要时使用，因为层级、关闭和焦点都要重建。无论选哪种，最后都要验证标题语义、初始焦点、Esc、外部点击和关闭后的焦点归还，这些行为共同决定浮层是否真正可用。

简化版

详细版