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" 且您必須新增關閉按鈕，手動彈出式視窗不會關閉其他彈出式視窗，也允許使用者在使用者介面中按一下將其關閉。您可以使用下列指令建立手動彈出式視窗：

<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 執行的作業
• 彈出式視窗的 MDN 說明文件