HTML Popover API 怎么做可关闭浮层：popover、关闭按钮与键盘回退

通知菜单、筛选面板和“更多操作”经常被写成一套手工定位的 JavaScript：监听点击、计算坐标、点空白关闭，再补 Escape 和焦点恢复。HTML Popover API 把其中一部分交给浏览器，核心是 popover 属性、popovertarget 关联和自动关闭规则。它适合做页面内临时浮层，但仍要认真处理焦点、浏览器降级和不应被遮住的关键操作。

先用原生关联打开一个操作菜单

下面的例子把触发按钮和浮层通过同一个 id 连接。按钮本身仍是按钮，浏览器能识别它的操作角色，浮层也不需要先渲染成一个隐藏的绝对定位盒子。

文件操作

  关闭
  重命名
  分享

toggle 负责在打开和关闭之间切换，关闭按钮显式使用 hide。这比给整个菜单加一个点击监听更容易读，也不依赖元素在页面中的具体层级。

auto 和 manual 的边界要先定下来

两种模式的差异不只是属性值不同，而是页面把“谁负责关闭”交给谁。

文件操作菜单通常选 auto。如果一个页面允许同时打开三个帮助气泡，才考虑 manual，并为每个气泡提供明确的关闭动作。不要为了少写几行把所有浮层都设成 manual，这会把点击空白、Escape 和重复打开的处理重新推回业务代码。

把浮层定位和显示逻辑分开

Popover API 解决的是显示状态、顶层呈现和部分关闭行为，不会替你设计视觉位置。可以先用普通定位完成一个可靠版本，再用 CSS 锚点定位等能力增强，不要把两个新能力一起当成必要条件。

[popover] {
  margin: 0; border: 1px solid #cbd2dc; border-radius: 10px;
  padding: 12px; background: #ffffff; color: #20242b;
  box-shadow: 0 12px 30px rgb(26 35 50 / 18%);
}
[popover]::backdrop { background: rgb(20 28 40 / 16%); }
[popover] a, [popover] button {
  display: block; min-block-size: 40px; padding: 8px 12px;
}

这里保留了足够大的点击区域，并让背景层只做轻微遮罩。真正需要模态确认时，应评估

打开、关闭和焦点要一起验收

一个浮层能显示只是第一步。鼠标操作完成后，键盘用户还要知道它何时打开、如何离开，以及关闭后焦点回到哪里。触发元素用原生 button，浮层里的第一个可操作元素要有明显焦点样式，关闭后再检查浏览器是否把焦点带回触发按钮；如果组件自己改写了焦点流程，就补充明确的脚本恢复。

1. Tab 到“文件操作”，按 Enter 或 Space，确认浮层出现并能继续 Tab。
2. 按 Escape，确认浮层关闭且页面没有残留遮罩或不可见焦点。
3. 打开另一个 auto 菜单，确认不需要点击多次才能收起旧菜单。
4. 缩放到 200% 并用窄屏测试，确认菜单没有遮住唯一的关闭入口。

为旧浏览器留下可读的回退

Popover 是增强能力，不应让核心操作依赖它。最简单的回退是让菜单内容在不支持的环境中保持可见，再在支持环境里用 :popover-open 控制外观。若产品必须默认收起，则通过能力检测加载经过测试的传统脚本，并确保按钮仍能触发同一操作。

[popover] { display: block; }
@supports selector(:popover-open) {
  [popover]:not(:popover-open) { display: none; }
}
@supports not selector(:popover-open) {
  .popover-fallback-note { display: block; }
}

回退不是把两个实现都默认打开。发布前至少在一台不支持目标能力的浏览器中完成一次“看到菜单、进入链接、关闭菜单”的完整路径；如果只能展示静态菜单，也要保证内容顺序和操作入口仍然合理。

常见问题

Popover 和 dialog 应该怎么选？

菜单、提示和短操作面板通常适合 Popover；需要用户先处理、再回到背景流程的模态确认，应优先评估 dialog。选择依据是交互语义，不是视觉上都像一个弹窗。

为什么 popover 打开后位置不在按钮旁边？

Popover 负责浮层状态，不自动理解你的布局意图。先确认默认样式、margin 和定位规则，再决定是否引入锚点定位或组件级定位方案。

manual 浮层为什么不会自动关闭？

manual 就是把关闭责任交给页面。为它提供 hide 触发器，必要时在页面切换、提交成功和组件卸载时主动清理。

只写 CSS 能完成完整的键盘焦点管理吗？

CSS 能提供清晰的焦点样式，但不能替代所有焦点恢复和业务状态同步。先使用原生 button 与 Popover 关联，再用实际键盘路径检查焦点是否符合预期。

Popover API 的价值在于缩小浮层状态代码，而不是把菜单变成自动正确。先选好 auto 或 manual，再用原生按钮连接、明确定位、键盘验收和旧浏览器回退把边界补齐，组件才适合进入真实页面。