本頁面由 Cloud Translation API 翻譯而成。

彈出式視窗個案研究

Swetha Gopalakrishnan

Saurabh Rajpal

彈出式視窗在網路上隨處可見。您可以在選單、切換提示和對話方塊中看到這些圖示，用於帳戶設定、揭露資訊小工具和產品資訊卡預覽等功能。儘管這些元件相當普遍，但在瀏覽器中建構這些元件仍相當費時。為解決這個問題，我們將為瀏覽器提供一組新的宣告式 HTML API，用於建立彈出式視窗，其中第一個就是 Popover API。

彈出式視窗是 Baseline 新功能的一部分。

瀏覽器支援

資料來源

彈出式視窗通常會與對話方塊混淆。不過，兩者的行為還是有些差異。使用 dialog.showModal 開啟的 dialog 元素 (模式對話方塊) 是一種需要使用者明確互動才能關閉模式的體驗。popover 支援 light-dismiss。但模式 dialog 則不會。強制回應對話方塊會使網頁的其他部分處於靜止狀態。popover 不會。進一步瞭解差異。

本文是系列文章的一部分，討論電子商務公司如何使用新的 CSS 和 UI 功能改善網站。本文將說明 Tokopedia 如何導入 Popover API 並從中獲益。

Tokopedia

在 React 中使用彈出屬性時，最多可減少 70% 的程式碼行。互動視窗可由 HTML 原生控制，無需在 JavaScript 中處理事件，並使用 React.createPortal 將強制回應 DOM 移至 document.body 結尾。我們也可以使用 @starting-style 為彈出式視窗的開啟和關閉效果加入動畫。—Andy Wihalim，Tokopedia 資深軟體工程師。

Tokopedia 的產品詳細資料頁面 (PDP) 包含多個產品圖片。使用者點選產品縮圖後，系統會開啟互動視窗並顯示放大的圖片。這是電子商務網站常用的模式。

程式碼

Tokopedia 會使用 React 進行前端開發作業。為這個互動視窗實作 Topover API 之前，他們使用了 DOM 互動視窗和按鈕。按鈕會變更 React 狀態，以便開啟模態視窗。他們使用彈出 API 時，會在元素中指定 popovertarget 屬性，用於開啟彈出式視窗，其值與彈出元素的 ID 相同。

在這個基本實作中，彈出式視窗會正常運作，但出現和消失時不會顯示任何動畫。如要為彈出式視窗建立流暢的進入和離開動畫，請使用 :popover-open 和 @starting-style，並允許個別屬性動畫。在以下程式碼範例中，彈出式視窗會使用 transform: 'scale()' 屬性縮放。

這個程式碼範例說明如何為 popover API 實作進入和離開動畫。

<Thumbnail popovertarget="medialightbox" />
<MediaLightbox popover id="medialightbox" />

export const cssModalWrapper = css({
  background: NN0,
  border: 'none',
  borderRadius: '.625rem',
  width: 1024,
  padding: 24,

  '&::backdrop': {
    opacity: 0,
    transitionProperty: 'opacity, display',
    transition: '.25s ease-out',
    transitionBehavior: 'allow-discrete',
  },

  transitionProperty: 'transform, opacity, display',
  transition: '.25s ease-out',
  transitionBehavior: 'allow-discrete',

  transform: 'scale(0.8)',
  opacity: 0,
  '@starting-style': {
    transform: 'scale(1)',
    opacity: 1,
  },

  '&:popover-open': {
    transform: 'scale(1)',
    opacity: 1,
    '@starting-style': {
      transform: 'scale(0.8)',
      opacity: 0,
    },
  },
});

為了滿足不支援 popover API 的瀏覽器，Tokopedia 實作了 oddbird 的 popover-polyfill，經 gzip 壓縮後僅 3.2 KB。他們對 polyfill 感到滿意，因為它運作良好，且不會導致效能倒退。總體而言，這些 API 能透過彈出式視窗 API，減少 React 中最多 70% 的程式碼行。

Tokopedia 使用 React，針對未使用該元件的頁面卸載彈出式視窗元件，進而達成分割程式碼的效果，然後對彈出內容執行程式碼分割作業。這樣一來，他們就縮減了初始要求的大小。

建議您將彈出式視窗與 CSS 錨點定位 (即將在 Chrome 推出) 結合使用，以便將彈出式視窗定位在其他元素的相對位置。這對於選單和工具提示來說相當實用。

資源

請參閱本系列的其他文章，瞭解電子商務公司如何透過使用新的 CSS 和 UI 功能 (例如捲動驅動動畫、彈出式視窗、容器查詢和 has() 選取器) 獲益。

彈出式視窗個案研究

Tokopedia

程式碼

使用 Popover API 時的注意事項

資源