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>
弹出式窗口与模态对话框
您可能想知道，当对话框存在时是否需要使用弹出式窗口，答案是：可能不需要。
请务必注意，弹出式窗口属性本身不提供语义。虽然您现在可以使用弹出式窗口构建类似于模态对话框的体验，但两者之间存在一些关键区别：
模态 <dialog> 元素
- 已使用
dialog.showModal()打开。 - 已停业，原因是
dialog.close()。 - 使页面的其余部分固定。
- 不支持轻关闭行为。
- 您可以使用
[open]属性设置打开状态的样式。 - 在语义上表示阻止与网页其余部分互动的交互式组件。
[popover] 属性
- 可以通过声明式调用程序 (
popovertarget) 打开。 - 通过
popovertarget（自动弹出式窗口）或popovertargetaction=hide（手动弹出式窗口）关闭。 - 不会使页面的其余部分闲置。
- 支持轻关闭行为。
- 您可以使用
:popover-open伪类设置打开状态的样式。 - 没有固有的语义。
总结和深入阅读
popover 为平台带来了许多令人兴奋的功能。如需详细了解此 API（包括关于该功能的无障碍功能的更多信息，以及关于该功能集的文档），推荐阅读以下内容：