popover
该popover
全局属性用于将元素指定为弹出窗口元素。
弹出窗口元素通过display: none
隐藏,直到通过调用/控制元素(即具有popovertarget
属性的<button>
或<input type="button">
)或HTMLElement.showPopover()
调用打开。
弹出元素打开时,将显示在所有其他元素之上的顶层,并且不会受到父元素的position
或overflow
样式的影响。
弹出属性可以具有值"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 表格仅在浏览器中加载
另请参阅
- Popover API
popovertarget
HTML 属性popovertargetaction
HTML 属性::backdrop
CSS 伪元素:popover-open
CSS 伪类