Popover API 进入基准

Una Kravets

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

浏览器支持

  • Chrome：114。 <ph type="x-smartling-placeholder">
  • 边缘：114。 <ph type="x-smartling-placeholder">
  • Firefox：125。 <ph type="x-smartling-placeholder">
  • Safari：17. <ph type="x-smartling-placeholder">

来源

弹出式窗口功能的一些要点如下：

  • 提升到顶层。弹出式窗口将显示在网页其余部分的顶层中，这样您就不必尝试 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 属性本身不提供语义。虽然您现在可以使用弹出式窗口构建类似模态对话框的体验，但两者之间存在一些主要区别：

模态 <dialog> 元素

  • 已使用 dialog.showModal() 打开。
  • 已因dialog.close()结束营业。
  • 使网页的其余部分变为休眠状态。
  • 不支持轻关闭行为。
  • 您可以使用 [open] 属性设置打开状态的样式。
  • 在语义上表示会阻止与网页其余部分互动的交互式组件。

[popover] 属性

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

结论和补充阅读材料

popover为平台带来了许多激动人心的功能。若要详细了解此 API（包括有关该功能无障碍功能的更多信息以及有关该功能集的文档），建议您阅读以下文档以了解更多信息：