介绍弹出框 popover API

弹出窗口在网络上随处可见。您可以在菜单、切换提示和对话框中看到它们，它们可能表现为帐户设置、披露小部件和产品卡预览。尽管这些组件非常流行，但在浏览器中构建它们仍然非常麻烦。您需要添加脚本来管理焦点、打开和关闭状态、组件的可访问挂钩、用于进入和退出体验的键盘绑定，甚至在您开始构建弹出窗口的有用、独特的核心功能之前就已经完成了这一切。

为了解决这个问题，一组用于构建弹出窗口的新声明式 HTML API 即将出现在浏览器中，从popoverChromium 114 中的 API 开始。

#弹出窗口属性

popover您可以让浏览器使用属性和后续功能集来处理它，而不是自己管理所有复杂性。HTML 弹出窗口支持：

• 晋升到顶层。弹出窗口将出现在页面其余部分之上的单独层上，因此您不必使用 z-index 进行混乱。
• 光消除功能。单击弹出窗口区域外部将关闭弹出窗口并返回焦点。
• 默认焦点管理。打开弹出窗口会使下一个制表符停止在弹出窗口内。
• 可访问的键盘绑定。按该esc键将关闭弹出窗口并返回焦点。
• 可访问的组件绑定。从语义上将弹出框元素连接到弹出框触发器。

您现在可以使用所有这些功能构建弹出窗口，而无需使用 JavaScript。一个基本的弹出窗口需要三件事：

1. popover包含弹出窗口的元素上的属性。
2. id包含弹出框的元素上的。
3. A包含打开弹出窗口的元素上的弹出窗口popovertarget的值。id

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

<div id="my-popover" popover>
  <p>I am a popover with more information.<p>
</div>

现在您有了一个功能齐全的基本弹出窗口。

该弹出窗口可用于传达附加信息或作为公开小部件。

#默认值和覆盖

默认情况下，例如在前面的代码片段中，使用 a 设置弹出窗口意味着打开popovertarget弹出窗口的按钮或元素将打开和关闭它。但是，您也可以使用创建显式弹出窗口popovertargetaction。这会覆盖默认的切换操作。popovertargetaction选项包括：

popovertargetaction="show"：显示弹出窗口。popovertargetaction="hide"：隐藏弹出窗口。

使用popovertargetaction="hide"，您可以在弹出窗口中创建一个“关闭”按钮，如以下代码片段所示：

<button popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden=”true”>❌</span>
    <span class="sr-only">Close</span>
</button>

#自动与手动弹出窗口

popover单独使用该属性实际上是popover="auto". 打开时，默认情况下popover将强制关闭其他自动弹出窗口，祖先弹出窗口除外。它可以通过轻关闭或关闭按钮来关闭。

另一方面，设置popover=manual创建另一种类型的弹出窗口：手动弹出窗口。这些不会强制关闭任何其他元素类型，也不会通过光关闭关闭。您必须通过计时器或显式关闭操作来关闭它们。适合的弹出窗口类型popover=manual是出现和消失的元素，但不应影响页面的其余部分，例如 toast 通知。

如果您浏览上面的演示，您会发现单击弹出窗口区域外部不会轻松关闭弹出窗口。此外，如果有其他弹出窗口打开，它们也不会关闭。

要查看差异：

弹出窗口popover=auto：

• 打开后，强制关闭其他弹出窗口。
• 可以轻视。

弹出窗口popover=manual：

• 不要强行关闭任何其他元素类型。
• 不要轻视。使用切换或关闭操作关闭它们。

#样式弹出窗口

到目前为止，您已经了解了 HTML 中的基本弹出窗口。但也有一些不错的造型功能popover。其中之一就是设计风格的能力::backdrop。

在auto弹出窗口中，这是直接位于顶层（弹出窗口所在的位置）下方的一层，位于页面其余部分的上方。在以下示例中，::backdrop赋予了半透明颜色：

#size-guide::backdrop {
  background: rgb(190 190 190 / 50%);
}

#popovera和 a之间的区别dialog

值得注意的是，该popover属性本身并不提供语义。虽然您现在可以使用 构建类似模式对话框的体验popover=”auto”，但两者之间存在一些关键区别：

dialog使用dialog.showModal（模态对话框）打开的元素是一种需要显式用户交互才能关闭模态的体验。Apopover支持光关闭。模态dialog则不然。模态对话框使页面的其余部分变得惰性。Apopover没有。

上面的演示是一个具有弹出行为的语义对话框。这意味着页面的其余部分不是惰性的，并且对话框弹出窗口确实具有轻关闭行为。您可以使用以下代码构建具有弹出窗口行为的对话框：

<button popovertarget="candle-01">
  Quick Shop
</button>
<dialog popover id="candle-01">
  <button class="close-btn" popovertarget="candle-01" popovertargetaction="hide">...</button>
  <div class="product-preview-container">
    ...
  </div>
</dialog>

#即将推出

#交互式进入和退出

display: none浏览器中尚不支持对离散属性进行动画处理，包括动画往返于顶层和动画往返顶层。然而，他们计划在即将发布的 Chromium 版本之后使用。

:popover-open凭借为离散属性设置动画以及使用和 的能力@starting-style，您将能够设置更改前和更改后样式，以便在打开和关闭弹出窗口时实现平滑过渡。以前面的例子为例。动画的进出看起来更加流畅，并支持更流畅的用户体验：

#锚定位

当您想要根据视口定位警报、模式或通知时，弹出窗口非常有用。但弹出窗口对于菜单、工具提示和其他需要相对于其他元素定位的元素也很有用。这就是 CSS 锚定的用武之地。

以下径向菜单演示使用弹出框 API 以及CSS 锚点定位来确保弹出框#menu-items始终锚定到其切换触发器（按钮）#menu-toggle。

设置锚点与设置弹出窗口类似：

<button id="menu-toggle" popovertarget="menu-items">
  Open Menu
</button>
<ul id="menu-items" popover anchor="menu-toggle">
  <li class="item">...</li>
  <li class="item">...</li>
</ul>

您可以通过给定锚点id（在本示例中为#menu-toggle）来设置锚点，然后使用anchor="menu-toggle"它来连接两个元素。现在，您可以使用它anchor()来设置弹出框的样式。锚定到锚点切换基线的居中弹出菜单的样式可能如下：

#menu-items {
  bottom: calc(anchor(bottom));
  left: anchor(center);
  translate: -50% 0;
}

现在您拥有了一个功能齐全的弹出菜单，该菜单固定在切换按钮上，并且具有弹出菜单的所有内置功能，无需 JavaScript！

#结论

弹出框 API 是一系列新功能的第一步，这些新功能使构建 Web 应用程序在默认情况下更易于管理和更易于访问。我很高兴看到您如何使用弹出窗口！

#补充阅读

• 对话框和弹出窗口看起来很相似。它们有何不同？
• 语义和 popover 属性
• 有关 popover 的 MDN 文档
• OpenUI 弹出框解释器