Popover API 进入基准

Una Kravets

重大消息！我最期待的功能之一刚刚在所有现代浏览器中推出，并正式纳入了 Baseline 2024。这项功能就是 Popover API。弹出式窗口提供了许多出色的基元和开发者功能，可用于构建分层界面，例如提示、菜单、教学界面等。

浏览器支持

  • Chrome：114.
  • Edge：114。
  • Firefox：125.
  • Safari：17.

来源

以下是有关弹出式窗口功能的一些要点：

  • 提升到顶层。弹出式窗口将显示在页面其余部分上方的顶层中，因此您无需调整 z-index。
  • “轻触关闭”功能。点击弹出式窗口区域外部会关闭弹出式窗口并返回焦点。
  • 默认的焦点管理。打开该弹出式窗口后，下一个标签页会在弹出式窗口中停止。
  • 无障碍键盘绑定。按 esc 键或双击即可关闭弹出式窗口并返回焦点。
  • 无障碍组件绑定。在语义上将 popover 元素连接到 popover 触发器。

创建弹出式窗口

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

  • 首先，在要作为弹出式窗口的元素上设置 popover 属性。
  • 然后，在 popover 元素上添加唯一的 id。
  • 最后，如需将按钮连接到 popover，请将按钮的 popovertarget 设置为 popover 元素的 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 属性与使用 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 属性本身不会提供语义。虽然您现在可以使用弹出式窗口构建类似于模态对话框的体验，但这两者之间存在一些关键区别：

模态 <dialog> 元素

  • 使用 dialog.showModal() 打开。
  • 已使用 dialog.close() 关闭。
  • 使页面的其余部分处于不活跃状态。
  • 不支持关闭灯的行为。
  • 您可以使用 [open] 属性设置打开状态的样式。
  • 在语义上表示会阻止与网页其余部分互动的 Interactive 组件。

[popover] 属性

  • 可使用声明式调用方 (popovertarget) 打开。
  • 使用 popovertarget（自动弹出式窗口）或 popovertargetaction=hide（手动弹出式窗口）关闭。
  • 不会使页面的其余部分无效。
  • 支持轻触关闭行为。
  • 您可以使用 :popover-open 伪类为打开状态设置样式。
  • 没有固有语义。

总结和拓展阅读

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