Popover API 如何做无 JavaScript 弹出层：按钮触发、焦点回收与浏览器降级

导航栏里的帮助说明、筛选条件和更多操作，过去往往要先写一段 JavaScript：监听按钮，再切换 class，最后自己处理点击外部和 Esc。现在可以先试试 Popover API，让 HTML 负责“谁打开谁”，CSS 负责位置和状态，脚本只留下不支持浏览器时的降级路径。

Popover API 解决的是哪一段交互

一个弹出层通常有四件事：初始隐藏、由按钮打开、点击外部或按 Esc 关闭、打开后出现在页面顶层而不是被父容器的 overflow 裁掉。原生 Popover API 把这些行为做成了 HTML 属性。

它适合帮助提示、筛选面板、操作菜单这类非模态内容。如果用户必须先完成弹窗里的任务，仍应评估

最小写法：两个属性连起按钮和内容

先给弹出层一个稳定的 id，再在按钮上填写同名的 popovertarget。不填写值的 popover 等同于 popover="auto"。

  查看筛选说明



  先选择状态，再点击“应用筛选”。

运行后先看三个可见结果：页面加载时说明层不占布局空间；点击按钮后浮层出现在页面内容之上；再次点击按钮或按 Esc 后浮层消失。这个版本没有一行 JavaScript。

需要固定动作时，指定 show、hide 或 toggle

默认按钮的动作是 toggle。如果一个关闭按钮不应该误开浮层，可以明确写成 hide：

打开筛选

  关闭
  
...筛选字段...

auto 和 manual 怎么选

auto 是轻量提示和单个操作菜单的起点。它支持 light dismiss：点击浮层外部或按 Esc 时关闭，打开另一个同层级的 auto 浮层时，浏览器通常会处理旧浮层的关闭。

manual 更像一个由业务流程托管的容器：不会因为点击外部就自动消失，也不会替你关闭另一个 manual 浮层。因此页面里必须有可见的关闭操作，否则键盘用户可能找不到离开方式。

焦点、定位和降级要一起验收

Popover API 会把浮层放进顶层显示层，但不会替你完成所有视觉设计。可以用 :popover-open 写打开态，用 ::backdrop 写背景层（适合需要弱化背景的场景），再用 CSS Anchor Positioning 或普通定位控制位置。

[popover] {
  margin: 0;
  inset: auto;
  position: fixed;
  top: 4.5rem;
  right: 1rem;
  max-width: min(22rem, calc(100vw - 2rem));
}

[popover]::backdrop {
  background: rgb(15 23 42 / 0.12);
}

手动验收时依次按 Tab、Enter、Esc：焦点应先落在按钮，打开后进入浮层中的可操作元素，关闭后回到触发按钮附近。若项目需要精细监听，可在支持检测后监听 toggle 事件；不要用脚本重复实现浏览器已经提供的 outside click 逻辑。

降级代码只做能力判断，不要把异常当成“不支持”。例如：

const canUsePopover = Object.hasOwn(HTMLElement.prototype, "popover");

if (!canUsePopover) {
  document.querySelectorAll("[popover]").forEach((node) => {
    node.hidden = false;
    node.classList.add("popover-fallback");
  });
}

降级样式可以把内容恢复为普通文档流中的说明块，或者接入项目已有的浮层组件。关键是让信息仍可读，而不是只保留一个失效的“查看说明”按钮。

上线前的三项快速检查

• 用最新版 Chrome、Firefox、Safari 和移动端浏览器各点一次，确认 auto 的关闭行为一致。
• 关闭 JavaScript 后重新访问，关键说明仍然应该能通过降级块阅读。
• 将浮层放进带 overflow: hidden 的卡片和窄屏视口中，检查文字、按钮和焦点是否都可见。

常见问题

Popover API 能完全替代 dialog 吗？

不能。Popover 更适合非模态的提示、菜单和面板；需要阻断背景操作并表达模态确认时，应使用 dialog 语义并单独验收焦点行为。

为什么设置了 popover 之后元素一开始不见了？

这是正常行为。Popover 元素默认由浏览器隐藏，必须由带 popovertarget 的按钮或 JavaScript 显示；不支持浏览器则走普通内容降级。

manual 模式为什么点击外部不会关闭？

manual 就是为了关闭行为由页面控制。为它放一个带 popovertargetaction="hide" 的按钮，并在关闭后给出提交成功或取消的可见反馈。

生产项目还要保留 JavaScript 吗？

可以保留很薄的一层，用于特性检测、业务提交和旧浏览器降级；不要再用它复制完整的开关、外部点击和 Esc 关闭实现。

小结

Popover API 的价值不只是少写几行脚本，而是把按钮与浮层之间的关系交给浏览器表达。先用 auto 完成最小交互，再按是否需要手动关闭选择 manual，最后用特性检测、键盘操作和窄屏布局做一次回归，通常就能得到一套足够稳的原生弹出层。