popover 属性与 dialog 区别

学完这篇，你能搞清 popover 属性和 <dialog> 元素到底各管什么场景，不再把「轻量浮层」和「模态弹窗」用混，并且能照着示例直接写出可用的代码。

第一步：认识 popover 属性——它不是元素，是属性

这一步你要搞清楚 popover 的写法和控制方式，做完能看到一个「点按钮出现、点外面消失」的浮层。

popover 是 HTML 全局属性（2023 年进入 HTML Living Standard），写在任意元素上，让这个元素变成一个可开关的浮层。它不写值就等于 popover="auto"：

<!-- 触发按钮：popovertarget 指向浮层的 id -->
<button popovertarget="menu">打开菜单</button>

<!-- popover 属性让 div 变成浮层 -->
<div id="menu" popover>
  <p>菜单内容</p>
  <button popovertarget="menu" popovertargetaction="hide">关闭</button>
</div>

popovertargetaction 有三个值：toggle（默认）、show、hide。这套写法完全不需要 JS。

要用 JS 控制，就调元素上的三个方法：

const menu = document.getElementById('menu');
menu.showPopover();    // 打开
menu.hidePopover();    // 关闭
menu.togglePopover();  // 切换

popover 有三种值，行为差别很大：

• auto（默认）：按 Esc 或点击浮层外部会关闭，而且打开一个新的 auto 浮层会自动关掉上一个
• manual：不响应 Esc 和外部点击，也不会自动关别的浮层，全靠你手动控制
• hint：新加入的取值，只自动关闭其他 hint 浮层，不会关掉 auto 浮层，适合做 tooltip

想做懒加载，监听 toggle 事件：

menu.addEventListener('toggle', (e) => {
  console.log(e.newState); // 'open' 或 'closed'
});

注意：popover 元素在关闭状态下的默认样式是 display: none。如果你写 [popover] { display: flex }，关掉之后它也会显示出来。正确做法是只覆盖打开态，或者补一条 [popover]:not(:popover-open) { display: none }。

注意：popover 打开后默认是 position: fixed; inset: 0; margin: auto，也就是屏幕居中。拿它做下拉菜单或 tooltip，必须自己覆盖定位，否则位置会跑偏。

第二步：认识 dialog 元素——show() 和 showModal() 是两码事

这一步你要分清 <dialog> 的两个打开方法，做完能得到一个真正锁住焦点的模态弹窗。

<dialog id="confirm">
  <form method="dialog">
    <p>确定要删除这条记录吗？</p>
    <button value="cancel">取消</button>
    <button value="ok">删除</button>
  </form>
</dialog>

const dlg = document.getElementById('confirm');
dlg.showModal();   // 模态：焦点锁在弹窗内，背景内容不可点、不可 Tab
// dlg.show();     // 非模态：就是个普通定位块，背景照常可交互

showModal() 会把对话框放进 top layer（顶层），同时把页面上其他内容变成 inert 状态，用户按 Tab 只能在弹窗内部循环，点背景也没反应。show() 完全没这些待遇。

关闭用 close()，可以带返回值：

dlg.close('ok');
console.log(dlg.returnValue); // 'ok'

配合 <form method="dialog">，点提交按钮会自动关闭对话框，并把按钮的 value 写进 returnValue，连 JS 都省了。

两个事件要记住：

dlg.addEventListener('cancel', (e) => {
  // 按 Esc 时触发，此时还没关闭
  // e.preventDefault() 可以拦下这次关闭
});
dlg.addEventListener('close', () => {
  console.log('已关闭，返回值：', dlg.returnValue);
});

背景遮罩用 ::backdrop 伪元素改：

dialog::backdrop {
  background: rgb(0 0 0 / 0.4);
}

第三步：逐项对比，看清核心差异

这一步把两者的关键差异列成表，做完你就能一眼判断该用哪个。

最本质的一条：popover 是轻量的，dialog.showModal() 是强制性的。前者用户可以不理会，后者用户必须先处理。

第四步：按场景选型

这一步给你一个决策规则，做完能直接套到自己的需求上。

用 popover： 下拉菜单、右键菜单、tooltip、快捷键面板、表情选择器。共同点是「用户不看也不影响继续操作」。

用 <dialog> + showModal()： 删除确认、登录、支付、必填表单。共同点是「用户必须做出选择才能往下走」，而且里面的表单需要 Tab 键能正常走完一圈。

用 <dialog> + show()： 需要浮在上层但背景还能操作的场景，比如可拖拽的调试面板。

两者可以叠用： <dialog popover> 这种写法是合法的，既有 dialog 的语义和 ::backdrop，又有 popover 的轻关闭行为。

注意：对已经处于模态打开状态的 <dialog> 再调一次 showModal()，会抛 InvalidStateError。调用前先判断 dlg.open。

注意：对一个没有 popover 属性的元素调 showPopover()，会抛 NotSupportedError。

注意：浏览器支持度不一样。<dialog> 的 showModal() 从 Chrome 37、Safari 15.4、Firefox 98 就有了；popover 要 Chrome/Edge 114、Safari 17、Firefox 125 才支持。要兼容更老的浏览器，popover 这边得准备降级方案。

第五步：别忘了无障碍这一环

这一步提醒你补上东西，做完能让屏幕阅读器用户正常使用。

<dialog> 自带 role="dialog"，只要用 aria-labelledby 指向标题就够了：

<dialog id="confirm" aria-labelledby="confirm-title">
  <h2 id="confirm-title">删除确认</h2>
</dialog>

popover 没有隐式角色。做菜单要补 role="menu"，做提示要补 role="tooltip"，否则屏幕阅读器只会当它是一段普通文本。

注意：有些浏览器在显示 auto 浮层时会把焦点移进去，但 Tab 到最后一个元素后不会循环，会跑到浮层后面的页面元素上。如果你的浮层里放了表单，直接换 dialog.showModal()，别在 popover 里手动实现焦点陷阱。

小结

• popover 是属性，轻量、不阻断页面、按 Esc 或点外部（auto）自动关闭，适合菜单和提示。
• <dialog> 是元素，showModal() 提供真正的模态：焦点陷阱、背景 inert、::backdrop 遮罩，适合必须响应的弹窗。
• <dialog> 的 show() 是非模态，别把它和 showModal() 弄混。
• popover 默认居中且关闭时 display: none，自定义样式时这两点最容易踩坑。
• popover 不做焦点陷阱、不提供隐式 role，表单类内容优先选 <dialog>。