本頁面由 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 進行前端開發作業。在為此模式視窗實作彈出式 API 之前，他們使用了 DOM 模式視窗和按鈕。按鈕會變更 React 狀態，以便開啟模態視窗。使用 popover API 時，您可以在開啟 popover 的元素中指定 popovertarget 屬性，其值必須與 popover 元素的 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 減少 React 中高達 70% 的程式碼行數。

Tokopedia 使用 React，因此團隊針對不使用 popover 的網頁卸載 popover 元件，然後為 popover 內容執行程式碼分割，以達到程式碼分割的效果。這樣一來，他們就縮減了初始要求的大小。

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

資源

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

彈出式視窗個案研究

Tokopedia

程式碼

使用 Popover API 時的注意事項

資源