popover

基线 2024

新可用

自从 2024年4月,此功能可在最新的设备和浏览器版本中使用。此功能可能在较旧的设备或浏览器中不起作用。

popover全局属性用于将元素指定为弹出窗口元素。

弹出窗口元素通过display: none隐藏,直到通过调用/控制元素(即具有popovertarget属性的<button><input type="button">)或HTMLElement.showPopover()调用打开。

弹出元素打开时,将显示在所有其他元素之上的顶层,并且不会受到父元素的positionoverflow样式的影响。

弹出属性可以具有值"auto"(默认值)或"manual"。具有auto状态的弹出窗口可以通过选择弹出窗口区域外部进行“轻触关闭”,并且通常一次只能显示一个弹出窗口。相比之下,manual弹出窗口必须始终显式隐藏,但允许使用嵌套菜单中的弹出窗口等用例。

有关用法的详细信息,请参阅Popover API首页。

示例

以下呈现一个按钮,激活时将打开一个弹出元素。

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

<div popover id="my-popover">Greetings, one and all!</div>

注意:请参阅我们的Popover API 示例首页以访问 MDN 弹出示例的完整集合。

规范

规范
HTML 标准
# the-popover-attribute

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅