HTMLElement: showPopover() 方法

基线 2024

新功能

2024 年 4 月起,此功能在最新的设备和浏览器版本中都能正常运行。此功能可能无法在旧设备或浏览器中运行。

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 的浏览器中加载。

另请参阅