Popover API 進入基準版本

Una Kravets

異動即將生效！我最期待的其中一項功能剛好已在所有新型瀏覽器上推出，並正式納入 Baseline 2024。這項功能就是 Popover API。Popover 提供許多出色的原始元素和開發人員操作元素，可用於建構分層介面，例如工具提示、選單、教學 UI 等等。

彈出式視窗的功能重點包括：

• 升至頂層。彈出式視窗會顯示在頁面其他部分的頂層，因此您不必使用 z-index。
• 輕鬆關閉功能。按一下彈出式視窗區域外部，系統就會關閉彈出式視窗並返回焦點。
• 預設焦點管理。開啟彈出式視窗後，下一個分頁會在彈出式視窗中停止。
• 無障礙鍵盤繫結。按下 esc 鍵或雙重切換可關閉彈出式視窗並返回焦點。
• 無障礙元件繫結：將彈出式視窗元素與彈出式視窗觸發事件連結，以便在語意上連結。

建立彈出式視窗

建立彈出式視窗相當簡單。如要使用預設值，您只需要一個 button 來觸發彈出式視窗，以及一個觸發元素。

• 首先，請在要用於彈出式視窗的元素上設定 popover 屬性。
• 接著，在彈出式視窗元素上新增不重複的 id。
• 最後，如要將按鈕連結至彈出式視窗，請將按鈕的 popovertarget 設為彈出式視窗元素的 id 值。

如下列程式碼所示：

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>

如要進一步控管彈出式視窗，您可以明確設定彈出式視窗類型。舉例來說，使用沒有值的裸 popover 屬性，與 popover="auto" 相同。auto 值可啟用輕型關閉行為，並自動關閉其他彈出式視窗。使用 popover="manual" 時，您需要新增關閉按鈕，手動彈出式視窗不會關閉其他彈出式視窗，也不允許使用者在 UI 中點選關閉彈出式視窗。您可以使用下列項目建立手動彈出式視窗：

<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>

彈出式視窗與模式對話方塊

您可能會想知道，在對話方塊出現時是否需要彈出式視窗，答案是：不一定。

請注意，popover 屬性本身不會提供語意。雖然您現在可以使用彈出式視窗建立類似模式對話方塊的體驗，但兩者之間有一些重要差異：

結論和延伸閱讀

popover 為平台帶來許多令人興奮的功能。如要進一步瞭解這個 API，包括功能的無障礙性和功能組合的說明文件，請參閱下列相關說明文章：

• 語義和彈出式視窗屬性：何時使用何種屬性？作者：Hidde de Vries
• 關於彈出式視窗無障礙功能：瀏覽器的做法和不做法，作者：Hidde de Vries
• Popover 的 MDN 說明文件