Popover API 進入基準版本

Una Kravets

異動即將生效！我最迫切的其中一項功能剛好可以透過所有新式瀏覽器導入，也是 Baseline 2024 的正式對象。這項功能是 Popover API。Popover 提供許多在建構多層式介面 (例如工具提示、選單、教學使用者介面等) 的實用原始項目和需求，方便開發人員自行運用。

彈出式功能的一些簡介如下：

• 升級為頂層圖層。彈出式視窗會顯示在頁面其餘部分的頂層中，讓您不必再操作 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 說明文件