HTMLElement: hidePopover() メソッド

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

hidePopover()HTMLElement インターフェイスのメソッドで、ポップオーバー要素(すなわち有効な popover 属性がある要素)を最上位レイヤーから外し、display: none のスタイルを付けます。

hidePopover()popover 属性のついた表示中の要素に対して呼び出された場合、beforetoggle イベントが発行され、続いてポップオーバーが非表示になり、それから toggle イベントが発行されます。要素が既に非表示であれば、エラーが発生します。

構文

js
hidePopover()

引数

なし。

返値

なし (undefined)。

例外

InvalidStateError DOMException

このポップオーバーが既に表示である場合に発生します。

次の例では、キーボードの特定のキーを押すことで、ポップオーバーを非表示にする機能を提供します。

最初に HTML です。

html
<div id="mypopover">
  <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.hidePopover();
  }
});

仕様書

Specification
HTML Standard
# dom-hidepopover

ブラウザーの互換性

BCD tables only load in the browser

関連情報