隆重推出彈出式視窗 API

Una Kravets

網路無所不在，您可以透過選單、切換鈕和對話方塊查看，分別可做為帳戶設定、揭露小工具和產品資訊卡預覽。儘管這些元件相當普遍，但在瀏覽器中建構這些元件仍會令人感到意外。此時，您必須新增指令碼來管理焦點、開啟或關閉狀態、可進入元件的掛鉤，以及用來進入和退出實驗的鍵盤繫結，而這一切都必須先完成，您才能著手為彈出式視窗建立實用、獨特且實用的核心功能。

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

彈出屬性

瀏覽器支援

  • 114
  • 114
  • 125
  • 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！

結論

快閃 API 是一系列新功能的第一步，目標是讓建構網頁應用程式更容易管理，而且在預設方面更易於存取。我很期待看到你如何使用彈出式視窗！

延伸閱讀