隆重推出彈出式視窗 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 建立明確的彈出式視窗。這會覆寫預設的 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：手動 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 支援光源關閉。但模式 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 錨定廣告就能派上用場。

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

延伸閱讀