HTMLElement: showPopover() メソッド
showPopover()
は HTMLElement
インターフェイスのメソッドで、ポップオーバー要素(すなわち有効な popover
属性がある要素)を最上位レイヤーに追加することで表示します。
showPopover()
が popover
属性のついた現在非表示の要素に対して呼び出された場合、beforetoggle
イベントが発行され、続いてポップオーバーが表示され、それから toggle
イベントが発行されます。要素が既に表示中であれば、エラーが発生します。
構文
js
showPopover()
引数
なし。
返値
なし (undefined
)。
例外
InvalidStateError
DOMException
-
このポップオーバーが既に表示中の場合に発生します。
例
次の例では、キーボードの特定のキーを押すことで、ポップオーバーを表示する機能を提供します。
最初に 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();
}
});
仕様書
Specification |
---|
HTML Standard # dom-showpopover |
ブラウザーの互換性
BCD tables only load in the browser