隆重推出彈出式視窗 API

Una Kravets

彈出式視窗在網路上隨處可見。您可以在選單、切換提示和對話方塊中看到這些元素，這些元素可能會以帳戶設定、揭露小工具和產品資訊卡預覽畫面的形式顯示。儘管這些元件相當普遍，但在瀏覽器中建構這些元件仍會令人感到意外。您需要新增指令碼來管理焦點、開啟和關閉狀態、可存取的元件鉤子，以及用於進入和離開體驗的鍵盤繫結，而且在開始建構彈出式視窗的實用、獨特的核心功能之前，就必須完成這些工作。

為解決這個問題，瀏覽器推出了一組用於建構彈出式視窗的全新宣告式 HTML API，自 Chromium 114 中的 popover API 起，

彈出式視窗屬性

瀏覽器支援

  • Chrome：114。
  • Edge：114。
  • Firefox：125。
  • Safari：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 建立明確的彈出式視窗。這會覆寫預設的切換動作。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：手動 popover。這些元素不會強制關閉任何其他元素類型，也不會透過輕觸關閉。必須透過計時器或明確的關閉動作關閉鬧鐘。適合 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 支援 light-dismiss。強制回應 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 和到 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！

結論

彈出式視窗 API 是一系列新功能的第一步，可讓您更輕鬆地管理建構的網頁應用程式，並在預設情況下提供更友善的無障礙體驗。期待看到你如何使用彈出式視窗！

延伸閱讀