重大消息!我最热衷的一项功能刚刚面向所有现代浏览器推出,已正式纳入 Baseline 2024。此功能是 Popover API。Popover 提供了许多很棒的基元和开发者功能,用于构建提示、菜单、教学界面等分层界面。
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<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(包括有关该功能无障碍功能的更多信息以及有关该功能集的文档),建议您阅读以下文档以了解更多信息: