隆重推出彈出式視窗 API

Una Kravets

彈出式視窗無遠弗屆，這些資訊卡會顯示在選單、切換提示和對話方塊，而這些模組可能是帳戶設定、揭露資訊小工具和產品資訊卡預覽畫面。儘管這些元件相當普遍，在瀏覽器中建立元件仍相當麻煩。您不僅需要新增指令碼來管理焦點、開啟及關閉狀態、可在元件中存取的掛鉤，還能使用鍵盤繫結進入及離開體驗。這一切都在您著手打造實用、獨特且核心功能之前。

為解決此問題，瀏覽器即將推出一組可用來建立彈出式視窗的宣告式 HTML API，自 Chromium 114 開始支援 popover API。

彈出式視窗屬性

瀏覽器支援

  • 114
  • 114
  • 17

資料來源

您可以運用 popover 屬性和後續功能組合，讓瀏覽器處理所有複雜性，而不必自行管理所有複雜度。HTML 彈出式視窗支援：

  • 升級到頂層彈出式視窗會顯示在網頁其他網頁上方的獨立圖層中，因此您不必翻找 Z-index。
  • 輕度關閉功能：按一下彈出式視窗區域以外的位置，即可關閉彈出式視窗並返回焦點。
  • 預設焦點管理。開啟彈出式視窗後，下一個分頁會在彈出式視窗中停止。
  • 無障礙鍵盤繫結。按下 esc 鍵會關閉彈出式視窗，並返回焦點。
  • 可存取的元件繫結。透過語意將彈出元素連結至彈出式觸發條件。

您現在不需使用 JavaScript，即可使用上述所有功能建立彈出式視窗。基本的彈出式視窗需要下列三個條件：

  • 含有彈出式視窗的元素上的 popover 屬性。
  • 對包含彈出式視窗的元素上的 id。
  • 請在開啟彈出式視窗的元素上，顯示彈出式視窗的 id 值 popovertarget。
<button popovertarget="my-popover"> Open Popover </button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

現在您已具備完整功能的基本彈出式視窗。

這個彈出式視窗可用來傳達其他資訊，或做為揭露小工具使用。

預設值和覆寫

根據預設，如先前的程式碼片段所示，使用 popovertarget 設定彈出式視窗，表示開啟彈出式視窗的按鈕或元素會切換為開啟和關閉。不過，您也可以使用 popovertargetaction 建立明確的彈出式視窗。這會覆寫預設的 toggle 動作。popovertargetaction 選項包括：

popovertargetaction="show"：顯示彈出式視窗。popovertargetaction="hide"：隱藏彈出式視窗。

使用 popovertargetaction="hide"，即可在彈出式視窗中建立「關閉」按鈕，如以下程式碼片段所示：

<button popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
</button>

自動與手動彈出式視窗

單獨使用 popover 屬性是 popover="auto" 的捷徑。開啟時，預設的 popover 會強制關閉其他自動彈出式視窗，但上層彈出式視窗除外。你可以透過輕鬆關閉或關閉按鈕關閉訊息。

另一方面，設定 popover=manual 會建立另一種類型的彈出式視窗：手動彈出。這些方法不會強制關閉任何其他元素類型，也不會透過淺色關閉功能關閉。你必須透過計時器或明確的關閉動作關閉它們。適合 popover=manual 的彈出式視窗類型是顯示和消失的元素，但不會影響網頁的其他部分 (例如浮動式訊息通知)。

如果在上面進行示範，可以發現在彈出式視窗外點擊時，都無法關閉彈出式視窗。此外，如果有其他開啟的彈出式視窗，也不會關閉。

如要查看差異，請按照下列步驟操作：

包含 popover=auto 的彈出式視窗：

  • 開啟時強制關閉其他彈出式視窗。
  • 可輕輕關閉。

包含 popover=manual 的彈出式視窗：

  • 請勿強制關閉任何其他元素類型。
  • 請勿輕微關閉。使用切換或關閉動作關閉聯絡人。

設定彈出式視窗樣式

到目前為止，您已經瞭解 HTML 的基本彈出式視窗，不過，popover 還提供一些實用的樣式功能。其中一種功能就是設定 ::backdrop 樣式。

在 auto 彈出式視窗中，這是位於頂層圖層 (彈出式視窗) 正下方的圖層，位於頁面其他部分上方。在以下範例中，::backdrop 指定了半透明顏色：

#size-guide::backdrop {
  background: rgb(190 190 190 / 50%);
}

popover 和 dialog 的差異

請注意，popover 屬性本身不提供語意。雖然現在您可以使用 popover="auto" 建構類似對話式的體驗，但兩者之間有幾項主要差異：

使用 dialog.showModal 開啟的 dialog 元素 (強制回應對話方塊) 是一種體驗，使用者必須明確進行互動才能關閉互動視窗。popover 支援淺色關閉。強制回應 dialog 不會。強制回應對話方塊會讓網頁的其餘部分改為宣告。popover 不會。

上述示範是含有彈出式視窗行為的語意對話方塊。這表示網頁的其他部分並未插入任何程式碼，且對話方塊會做出淺色關閉行為。您可以使用下列程式碼，以彈出行為建構這個對話方塊：

<button popovertarget="candle-01">
  Quick Shop
</button>
<dialog popover id="candle-01">
  <button class="close-btn" popovertarget="candle-01" popovertargetaction="hide">...</button>
  <div class="product-preview-container">
    ...
  </div>
</dialog>

即將推出

互動進入與離開

瀏覽器目前尚未支援為獨立屬性建立動畫效果，包括對 display: none 進行動畫處理，以及在頂層與頂層顯示動畫效果。不過，我們計劃在即將推出的 Chromium 版本中推出這些版本。

您可運用 :popover-open 和 @starting-style 為獨立屬性建立動畫，藉此設定變更前和變更後的樣式，以便在開啟及關閉彈出式視窗時提供流暢的轉場效果。以上一個範例為例。動畫內部和外觀的動畫將更順暢，且支援更流暢的使用者體驗：

錨定標記位置

當您想要根據可視區域放置快訊、強制回應或通知時，就可以使用彈出式視窗。但彈出式視窗也適用於選單、工具提示，以及需要與其他元素相對定位的其他元素。這時 CSS 錨定就能派上用場。

以下放射式選單示範使用彈出式 API 搭配 CSS 錨定位置，確保彈出的 #menu-items 一定會固定在其切換觸發條件 (即 #menu-toggle 按鈕) 上。

錨定標記的設定方法與設定彈出式視窗類似：

<button id="menu-toggle" popovertarget="menu-items">
  Open Menu
</button>
<ul id="menu-items" popover anchor="menu-toggle">
  <li class="item">...</li>
  <li class="item">...</li>
</ul>

只要提供 id (在此範例中為 #menu-toggle)，就能設定錨點，然後使用 anchor="menu-toggle" 連結兩個元素。您現在可以使用 anchor() 設定彈出式視窗的樣式。固定在錨點切換鈕基準線的置中彈出式選單可調整樣式：

#menu-items {
  bottom: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
}

現在，您已將可正常運作的彈出式選單固定在切換鈕上，所有內建彈出式視窗功能，完全不需要 JavaScript！

結論

popover API 是一系列新功能的第一步，可讓您建構易於管理且更容易依預設存取的網頁應用程式。期待看到你如何使用彈出式視窗！

延伸閱讀