HTMLElement: showPopover() 方法
Baseline 2024 *
新推出
showPopover() 是 HTMLElement 接口的一个方法，它通过将其添加到顶层来显示一个弹出式界面元素（即具有有效popover 属性的元素）。
当对一个带有 popover 属性且当前隐藏的元素调用 showPopover() 时，会首先触发一个 beforetoggle 事件，然后弹出式界面会显示，最后触发 toggle 事件。如果元素已经显示，则会抛出错误。
语法
js
showPopover()
showPopover(options)
参数
options可选-
一个可能包含以下属性的对象：
source可选-
一个
HTMLElement引用；以编程方式定义与 show 操作关联的弹出式界面的调用者，即其控件元素。使用source选项在弹出式界面及其调用者之间建立关系有两个有用的效果：- 浏览器会在显示时将弹出式界面放置在键盘焦点导航顺序的逻辑位置。这使得弹出式界面对键盘用户更具可访问性（另请参阅 弹出式界面的可访问性功能）。
- 浏览器在两者之间创建了一个隐式锚点引用，使得使用 CSS 锚点定位 来相对于其控件定位弹出窗口非常方便。有关更多详细信息，请参阅 弹出锚点定位。
返回值
无（undefined）。
异常
InvalidStateErrorDOMException-
如果弹出式界面已显示，则抛出此错误。
示例
以下示例提供了通过按键盘上的特定键来显示弹出式界面的功能。
首先，一些 HTML
html
<div id="mypopover" popover>
<h2>Help!</h2>
<p>You can use the following commands to control the app</p>
<ul>
<li>Press <ins>C</ins> to order cheese</li>
<li>Press <ins>T</ins> to order tofu</li>
<li>Press <ins>B</ins> to order bacon</li>
<hr />
<li>Say "Service" to summon the robot waiter to take your order</li>
<li>Say "Escape" to engage the ejector seat</li>
</ul>
</div>
现在是连接功能的 JavaScript
js
const popover = document.getElementById("mypopover");
document.addEventListener("keydown", (event) => {
if (event.key === "h") {
popover.showPopover();
}
});
规范
| 规范 |
|---|
| HTML # dom-showpopover |
浏览器兼容性
加载中…