popover
該popover全域性屬性用於將元素指定為彈出視窗元素。
彈出視窗元素透過display: none隱藏,直到透過呼叫/控制元素(即具有popovertarget屬性的<button>或<input type="button">)或HTMLElement.showPopover()呼叫開啟。
彈出元素開啟時,將顯示在所有其他元素之上的頂層,並且不會受到父元素的position或overflow樣式的影響。
彈出屬性可以具有值"auto"(預設值)或"manual"。具有auto狀態的彈出視窗可以透過選擇彈出視窗區域外部進行“輕觸關閉”,並且通常一次只能顯示一個彈出視窗。相比之下,manual彈出視窗必須始終顯式隱藏,但允許使用巢狀選單中的彈出視窗等用例。
有關用法的詳細資訊,請參閱Popover API首頁。
示例
以下呈現一個按鈕,啟用時將開啟一個彈出元素。
html
<button popovertarget="my-popover">Open Popover</button>
<div popover id="my-popover">Greetings, one and all!</div>
注意:請參閱我們的Popover API 示例首頁以訪問 MDN 彈出示例的完整集合。
規範
| 規範 |
|---|
| HTML 標準 # the-popover-attribute |
瀏覽器相容性
BCD 表格僅在瀏覽器中載入
另請參閱
- Popover API
popovertargetHTML 屬性popovertargetactionHTML 屬性::backdropCSS 偽元素:popover-openCSS 偽類