HTMLElement：hidePopover() 方法

基线 2024

新可用

自 2024 年 4 月起，此功能可在最新的设备和浏览器版本中使用。此功能可能在旧版设备或浏览器中无法使用。

hidePopover() 方法是 HTMLElement 接口的方法，用于隐藏弹出窗口元素（即具有有效 popover 属性的元素），方法是将其从顶层移除并将其样式设置为 display: none。

当在具有 popover 属性的显示元素上调用 hidePopover() 时，将触发 beforetoggle 事件，然后隐藏弹出窗口，最后触发 toggle 事件。如果元素已隐藏，则会抛出错误。

语法

js

hidePopover()

参数

无。

返回值

无（undefined）。

异常

InvalidStateError DOMException: 如果弹出窗口已隐藏，则抛出此异常。

示例

以下示例提供了通过按键盘上的特定键来隐藏弹出窗口的功能。

HTML

html

<button popovertarget="mypopover">Toggle popover's display</button>
<div id="mypopover" popover="manual">
  You can press <kbd>h</kbd> on your keyboard to close the popover.
</div>

JavaScript

js

const popover = document.getElementById("mypopover");

document.addEventListener("keydown", (event) => {
  if (event.key === "h") {
    popover.hidePopover();
  }
});

结果

规范

规范
HTML 标准 # dom-hidepopover

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

Popover API