popover

基線 2024

新可用

自從 2024年4月,此功能可在最新的裝置和瀏覽器版本中使用。此功能可能在較舊的裝置或瀏覽器中不起作用。

popover全域性屬性用於將元素指定為彈出視窗元素。

彈出視窗元素透過display: none隱藏,直到透過呼叫/控制元素(即具有popovertarget屬性的<button><input type="button">)或HTMLElement.showPopover()呼叫開啟。

彈出元素開啟時,將顯示在所有其他元素之上的頂層,並且不會受到父元素的positionoverflow樣式的影響。

彈出屬性可以具有值"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 表格僅在瀏覽器中載入

另請參閱