---

title: Popover API 原生弹层：无框架交互与可访问性

keywords:

• Popover API
• anchor positioning
• 可访问性
• :popover-open
• 原生弹层

description: 介绍 Popover API 的使用与可访问性特性，利用原生定位与状态管理实现可靠的弹层交互并减少 JS 复杂度。

date: 2025-11-27

sources:

• https://developer.chrome.com/docs/web-platform/popover-api/
• https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
• https://web.dev/advanced-popovers/

categories:

• 文章资讯
• 编程技术

---

概述

Popover API 为页面提供原生的弹层显示与关闭语义，带有焦点管理与无障碍支持，可替代部分自定义对话与菜单组件实现。

使用（已验证）

<button popovertarget="menu">打开菜单</button>
<div id="menu" popover>
  <ul><li>Item</li></ul>
</div>

• 选择器与样式：:popover-open 用于状态样式；配合 Anchor Positioning 精确定位（来源）

建议

• 尊重焦点与 ESC 关闭；与 View Transitions 组合提升体验