このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
HTMLElement: showPopover() メソッド
Baseline 2024 *Newly available
Since April 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
* Some parts of this feature may have varying levels of support.
showPopover() はHTMLElement インターフェイスのメソッドで、ポップオーバー要素（すなわち有効なpopover 属性がある要素）を最上位レイヤーに追加することで表示します。
showPopover() がpopover 属性のついた現在非表示の要素に対して呼び出された場合、beforetoggle イベントが発行され、続いてポップオーバーが表示され、それからtoggle イベントが発行されます。要素が既に表示中であれば、エラーが発生します。
構文
js
showPopover()引数
なし。
返値
なし (undefined)。
例外
InvalidStateErrorDOMExceptionこのポップオーバーが既に表示中の場合に発生します。
例
次の例では、キーボードの特定のキーを押すことで、ポップオーバーを表示する機能を提供します。
最初に HTML です。
html
<div 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 # dom-showpopover |