隆重推出彈出式視窗 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 錨點就派上用場。

下列圓形選單示範使用 popover API 和 CSS 錨點定位，確保 popover #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 是一系列新功能的第一步，可讓您更輕鬆地管理建構的網頁應用程式，並在預設情況下提供更友善的無障礙體驗。期待看到你如何使用彈出式視窗！

延伸閱讀