HTMLElement: showPopover() 方法
showPopover()
方法是 HTMLElement
接口的方法,它通过将 popover 元素(即具有有效 popover
属性的元素)添加到 顶层 来显示该元素。
当在具有 popover
属性且当前处于隐藏状态的元素上调用 showPopover()
时,将触发 beforetoggle
事件,然后显示 popover,最后触发 toggle
事件。如果元素已经显示,则会抛出错误。
语法
js
showPopover()
参数
无。
返回值
无 (undefined
).
异常
InvalidStateError
DOMException
-
如果 popover 已经显示,则抛出此异常。
示例
以下示例提供了一种通过按下键盘上的特定键来显示 popover 的功能。
首先,一些 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 |
浏览器兼容性
BCD 表格只能在启用了 JavaScript 的浏览器中加载。