Popover API

Web 上一个非常常见的模式是在其他内容之上显示内容，从而将用户的注意力吸引到需要采取的特定重要信息或操作。此内容可以有多个不同的名称——覆盖层、弹出窗口、弹出框、对话框等。在整个文档中，我们将将其称为弹出框。一般来说，这些可以是

• **模态**的，这意味着当显示弹出框时，页面其余部分将无法交互，直到以某种方式操作弹出框（例如，做出重要选择）。
• **非模态**的，这意味着在显示弹出框时，可以与页面其余部分进行交互。

使用 Popover API 创建的弹出框始终是非模态的。如果要创建模态弹出框，则<dialog> 元素是正确的选择。两者之间存在很大的重叠——例如，您可能希望创建一个持久存在的弹出框，但使用声明性 HTML 来控制它。如果要将弹出框控制与对话框语义结合起来，可以将<dialog> 元素转换为弹出框（<dialog popover> 是完全有效的）。

Popover API 的典型用例包括用户交互式元素，如操作菜单、自定义“Toast”通知、表单元素建议、内容选择器或教学 UI。

您可以通过两种不同的方式创建弹出框

• 声明式，通过一组新的 HTML 属性。可以使用以下代码创建一个带有切换按钮的简单弹出框
  html

  <button popovertarget="mypopover">Toggle the popover</button>
  <div id="mypopover" popover>Popover content</div>
  

• 通过 JavaScript API。例如，HTMLElement.togglePopover() 可用于在显示和隐藏之间切换弹出框。

还有一些新的事件可以响应弹出框的切换，以及一些有助于样式化弹出框的 CSS 功能。下面列出了所有新功能。

有关使用此 API 的详细指南，请参阅使用弹出框 API。

popover

一个全局属性，可将元素转换为弹出框元素；以弹出框状态（"auto" 或 "manual"）作为其值。

popovertarget

将<button> 或<input> 元素转换为弹出框控制按钮；以要控制的弹出框元素的 ID 作为其值。

popovertargetaction

指定要对由控制<button> 或<input> 控制的弹出框元素执行的操作（"hide"、"show" 或 "toggle"）。

::backdrop

::backdrop 伪元素是一个全屏元素，放置在弹出框元素的正后方，如果需要，允许向弹出框后面的页面内容添加效果（例如，将其模糊）。

:popover-open

:popover-open 伪类仅在弹出框元素处于显示状态时才匹配它——它可用于在弹出框显示时对其进行样式化。

ToggleEvent

表示一个事件，通知用户弹出框元素的状态在显示和隐藏之间切换。它是beforetoggle 和toggle 事件的事件对象，当弹出框的状态发生变化时，这些事件会在弹出框上触发。

HTMLElement.popover

通过 JavaScript 获取和设置元素的弹出框状态（"auto" 或 "manual"），可用于功能检测。反映popover 全局 HTML 属性的值。

HTMLButtonElement.popoverTargetElement 和HTMLInputElement.popoverTargetElement

获取和设置由控制按钮控制的弹出框元素。popovertarget HTML 属性的 JavaScript 等效项。

HTMLButtonElement.popoverTargetAction 和HTMLInputElement.popoverTargetAction

获取和设置要对由控制按钮控制的弹出框元素执行的操作（"hide"、"show" 或 "toggle"）。反映popovertargetaction HTML 属性的值。

HTMLElement.hidePopover()

通过将其从顶层移除并使用display: none对其进行样式化来隐藏弹出框元素。

HTMLElement.showPopover()

通过将其添加到顶层来显示弹出框元素。

HTMLElement.togglePopover()

在显示和隐藏状态之间切换弹出框元素。

HTMLElement beforetoggle 事件

在弹出框元素的状态在显示和隐藏之间切换之前触发。

HTMLElement toggle 事件

在弹出框元素的状态在显示和隐藏之间切换之后触发。此事件已存在于<details> 元素上发出状态更改信号，并且将其扩展到弹出框元素似乎是合乎逻辑的。

请访问我们的Popover API 示例着陆页以访问 MDN 弹出框示例的完整集合。

• popover HTML 全局属性
• popovertarget HTML 属性
• popovertargetaction HTML 属性
• ::backdrop CSS 伪元素
• :popover-open CSS 伪类