Popover API 进入基准

Una Kravets

重大消息！我最热衷的功能之一刚刚出现在所有现代浏览器中，并已正式纳入 Baseline 2024。此功能是 Popover API。Popover 提供了许多很棒的基元和开发者功能，用于构建分层界面，如提示、菜单、教学界面等。

弹出式窗口功能的亮点包括：

• 提升到顶层。弹出式窗口将出现在页面其余部分的上方顶层，因此您无需尝试 z-index。
• 轻度关闭功能。点击弹出式窗口区域以外的位置会关闭弹出式窗口并返回焦点。
• 默认的焦点管理。打开弹出式窗口会使下一个标签页停止在弹出式窗口内显示。
• 无障碍键盘绑定。点按 esc 键或进行双重切换会关闭弹出式窗口并返回焦点。
• 可访问的组件绑定。从语义上将弹出式窗口元素连接到弹出式窗口触发器。

创建弹出式窗口

创建弹出式窗口非常简单。如需使用默认值，您只需要一个用于触发弹出式窗口的 button 以及一个要触发的元素。

• 首先，在要作为弹出式窗口的元素上设置 popover 属性。
• 然后，在弹出式窗口元素上添加一个唯一的 id。
• 最后，如需将按钮连接到弹出式窗口，请将按钮的 popovertarget 设置为弹出式窗口元素的 id 的值。

具体如以下代码所示：

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>

要对弹出式窗口进行更精细的控制，您可以明确设置弹出式窗口的类型。例如，使用不带值的裸 popover 属性等同于 popover="auto"。auto 值会启用浅色关闭行为，并自动关闭其他弹出式窗口。使用 popover="manual"，并且您需要添加一个关闭按钮，手动弹出式窗口不会关闭其他弹出式窗口，也不会允许用户通过在界面中点击离开窗口来关闭该弹出式窗口。您可以使用以下代码创建手动弹出式窗口：

<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>

弹出式窗口与模态对话框

您可能想知道，当对话框存在时是否需要使用弹出式窗口，答案是：可能不需要。

请务必注意，弹出式窗口属性本身不提供语义。虽然您现在可以使用弹出式窗口构建类似于模态对话框的体验，但两者之间存在一些关键区别：

总结和深入阅读

popover 为平台带来了许多令人兴奋的功能。如需详细了解此 API（包括关于该功能的无障碍功能的更多信息，以及关于该功能集的文档），推荐阅读以下内容：

• 语义和弹出式窗口属性：何时使用？作者：Hidde de Vries
• 关于弹出式窗口无障碍功能：浏览器的用途和不可以执行的操作（作者：Hidde de Vries）
• 关于弹出式窗口的 MDN 文档