popover

实验性: 这是一项实验性技术
在将其用于生产之前,请仔细检查浏览器兼容性表格

全局属性 popover 用来指定一个元素为弹出式元素(popover element)。

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

当打开时,弹出式元素将出现在所有其他元素之上,即在顶层 (en-US)上,并且不会受到父元素的 positionoverflow 样式的影响。

popover 属性可以有 "auto" (en-US)(默认)或 "manual" (en-US) 的取值。具有 auto 状态的弹窗可以通过在弹窗之外的区域进行选择,以达到“轻触关闭”的目的,并且通常一次仅允许屏幕上显示一个弹窗。相比之下,manual 弹窗必须始终明确隐藏,但可以用于菜单中嵌套弹窗等使用情况。

有关更详细的使用信息,请参阅 Popover API (en-US) 页面。

示例

下述代码将呈现一个按钮,它将打开一个弹出式元素。

html

<button popovertarget="my-popover">打开 Popover</button>

<div popover id="my-popover">大家好!欢迎你们!</div>

备注: 请参阅我们的 Popover API 示例页面以访问所有的 MDN popover 示例。

规范

Specification
HTML Standard
# the-popover-attribute

浏览器兼容性

BCD tables only load in the browser

参见