彈出式視窗個案研究

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X LinkedIn
Saurabh Rajpal
Saurabh Rajpal
X LinkedIn

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

彈出式視窗常與對話方塊混淆。不過兩者的行為還是有一些主要差異。以 dialog.showModal 開啟的 dialog 元素 (強制回應對話方塊) 是一種體驗，需要使用者明確互動才能關閉強制回應。popover 支援輕觸即關閉功能。強制回應 dialog 則不會。強制回應對話方塊會讓頁面其餘部分處於閒置狀態。popover 不會。 進一步瞭解兩者之間的差異。

本文是系列文章之一，探討電子商務公司如何運用新的 CSS 和 UI 功能，提升網站品質。本文將說明 Tokopedia 如何導入 Popover API，以及這項 API 為他們帶來哪些好處。

Tokopedia

使用快顯視窗屬性後，React 的程式碼行數最多減少了 70%。現在只要使用 HTML 即可原生控制模式，不必在 JavaScript 中處理事件，也不必使用 React.createPortal 將模式 DOM 移至 document.body 結尾。我們也能使用 @starting-style 為彈出式視窗的開啟和關閉動作製作動畫。—Tokopedia 資深軟體工程師 Andy Wihalim。

Tokopedia 的產品詳細資料頁面 (PDP) 包含每項產品的多張圖片。點選產品縮圖時，系統會開啟強制回應，顯示放大圖片。這是電子商務網站中常用的模式。

程式碼

Tokopedia 使用 React 進行前端開發。在為這個模式實作 Popover 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 感到滿意，因為這項功能運作良好，且不會導致效能回歸。整體而言，他們使用 Popover API 後，React 程式碼行數最多減少了 70%。

使用 Popover API 時的注意事項

Tokopedia 使用 React，團隊先卸載未使用的頁面彈出式視窗元件，然後對彈出式視窗內容進行程式碼分割，藉此達成程式碼分割。這樣一來，他們就能縮減初始要求的大小。

建議將快顯視窗與 CSS 錨點定位功能 (即將在 Chrome 中推出) 結合使用，將快顯視窗定位在其他元素的相對位置。例如選單和工具提示。

資源

歡迎參閱本系列的其他文章，瞭解電子商務公司如何運用捲軸驅動動畫、快顯視窗、容器查詢和 has() 選取器等 CSS 和 UI 新功能獲益。