HTML 彈出層全域性屬性

Baseline 2024 *

新推出

自 ⁨2024 年 4 月⁩ 起，此功能可在最新的裝置和瀏覽器版本中執行。此功能可能不適用於較舊的裝置或瀏覽器。

* 此特性的某些部分可能存在不同級別的支援。

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

值

popover 屬性可以接受以下值之一：

"auto": auto 彈出層可以被“輕拂關閉”（light dismissed）——這意味著您可以透過點選彈出層外部或按下 Esc 鍵來隱藏彈出層。顯示一個 auto 彈出層通常會關閉其他已顯示的 auto 彈出層，除非它們是巢狀的。

注意： 為 popover 設定空值 — popover 或 popover="" — 等同於設定 popover="auto"。
"hint" 實驗性: hint 彈出層在顯示時不會關閉 auto 彈出層，但會關閉其他 hint 彈出層。它們可以被輕拂關閉，並響應關閉請求。
"manual": manual 彈出層不能被“輕拂關閉”，也不會自動關閉。彈出層必須透過宣告式的顯示/隱藏/切換按鈕或 JavaScript 來顯式顯示和關閉。可以同時顯示多個獨立的 manual 彈出層。

彈出層元素透過 display: none 隱藏，直到透過一個呼叫/控制元素（例如，帶有 popovertarget 屬性的 <button> 或 <input type="button">）或 HTMLElement.showPopover() 呼叫開啟。

開啟時，彈出層元素將顯示在頂層的所有其他元素之上，並且不受父元素的 position 或 overflow 樣式的影響。

具有 auto 狀態的彈出層可以使用關聯的控制元件（由 popovertarget 屬性指定）顯示和隱藏，並且可以透過點選彈出層區域外部、開啟另一個彈出層或按下瀏覽器特定機制（如 Esc 鍵）來“輕拂關閉”。

通常一次螢幕上只能顯示一個 auto 彈出層 — 當一個彈出層已顯示時，再顯示第二個彈出層會隱藏第一個。此規則的例外是當您有巢狀的 auto 彈出層時。有關更多詳細資訊，請參閱巢狀彈出層。

它們也可以使用 JavaScript 進行控制，例如，可以使用 HTMLElement.togglePopover() 方法在顯示和隱藏之間切換彈出層。

相比之下，manual 彈出層必須手動顯示和隱藏 — 它們在顯示時不會自動關閉其他彈出層，也不能被輕拂關閉。這允許在需要同時顯示多個彈出層的用例中使用。

hint 彈出層在顯示時不會關閉 auto 彈出層，但會關閉其他 hint 彈出層。它們可以被輕拂關閉，並響應關閉請求。

通常，hint 彈出層是響應非滑鼠點選的 JavaScript 事件（如 mouseover/mouseout 和 focus/blur）來顯示和隱藏的。點選按鈕開啟 hint 彈出層會導致一個已開啟的 auto 彈出層被輕拂關閉。

有關用法的詳細資訊，請參閱 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

此頁面最後修改於 ⁨2025年7月9日⁩，由 MDN 貢獻者修改。