HTMLElement: showPopover() 方法
Baseline 2024 *
新推出
showPopover() 是 HTMLElement 介面的一個方法，它透過將其新增到頂層來顯示一個彈出式介面元素（即具有有效popover 屬性的元素）。
當對一個帶有 popover 屬性且當前隱藏的元素呼叫 showPopover() 時，會首先觸發一個 beforetoggle 事件，然後彈出式介面會顯示，最後觸發 toggle 事件。如果元素已經顯示，則會丟擲錯誤。
語法
js
showPopover()
showPopover(options)
引數
options可選-
一個可能包含以下屬性的物件：
source可選-
一個
HTMLElement引用；以程式設計方式定義與 show 操作關聯的彈出式介面的呼叫者，即其控制元件元素。使用source選項在彈出式介面及其呼叫者之間建立關係有兩個有用的效果：- 瀏覽器會在顯示時將彈出式介面放置在鍵盤焦點導航順序的邏輯位置。這使得彈出式介面對鍵盤使用者更具可訪問性（另請參閱 彈出式介面的可訪問性功能）。
- 瀏覽器在兩者之間建立了一個隱式錨點引用，使得使用 CSS 錨點定位 來相對於其控制元件定位彈出視窗非常方便。有關更多詳細資訊，請參閱 彈出錨點定位。
返回值
無（undefined）。
異常
InvalidStateErrorDOMException-
如果彈出式介面已顯示，則丟擲此錯誤。
示例
以下示例提供了透過按鍵盤上的特定鍵來顯示彈出式介面的功能。
首先，一些 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 |
瀏覽器相容性
載入中…