彈出式視窗個案研究

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

彈出式視窗無遠弗屆，您可以在選單、切換提示和對話方塊中看到這些項目，用於帳戶設定、揭露事項小工具和產品資訊卡預覽等功能。儘管這些元件相當普遍，但在瀏覽器中建構這些元件仍相當麻煩。為解決此問題，瀏覽器即將推出一組用於建立彈出式視窗的宣告式 HTML API，第一個是 Popover API。

彈出式視窗屬於新上市基準的一部分。

瀏覽器支援

  • 114
  • 114
  • 125
  • 17

來源

彈出式視窗通常會與對話方塊混淆。但在行為上有些關鍵差異。使用 dialog.showModal 開啟的 dialog 元素 (強制回應對話方塊) 是一種需要明確使用者互動才能關閉視窗的使用體驗。popover 支援淺色關閉。強制回應 dialog 不會。強制回應對話方塊會讓網頁的其餘部分改為宣告。popover 不會。進一步瞭解差異。

本文是系列文章的一部分，旨在探討電子商務公司如何使用新的 CSS 和 UI 功能提升網站成效。在本文中，您將瞭解 Tokopedia 如何實作 Popover API 並發揮其益處。

Tokopedia

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

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

程式碼

Tokopedia 使用 React 進行前端開發。他們在為這個互動模組導入彈出式 API 之前，使用了 DOM 互動視窗和按鈕。這個按鈕會將 React 狀態變更為開啟互動視窗。在彈出式 API 中，開發人員可以在元素中指定 popovertarget 屬性，該屬性會開啟彈出式視窗，並顯示與彈出式元素 ID 相同的值。

透過這項基本實作，彈出式視窗能正常運作，但會在沒有任何動畫的情況下顯示或消失。如要為彈出式廣告建立流暢的進入和結束動畫，請使用 :popover-open 和 @starting-style，並允許顯示離散屬性的動畫。在以下程式碼範例中，彈出式視窗會使用 transform: 'scale()' 屬性縮放。

這個程式碼範例說明如何為彈出 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',

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

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

為了配合不支援 Popover API 的瀏覽器，Tokopedia 利用 oddbird 實作 popover-polyfill，此功能使用 gzip 壓縮時只有 3.2 KB。他們對 polyfill 感到滿意，且效能良好，且並未造成效能迴歸。整體而言，這類 API 可透過 Popover API 將 React 的程式碼行減少最多 70%。

使用 Popover API 時的注意事項

Tokopedia 使用 React，並透過 React，針對不使用這個程式碼的網頁卸載彈出式視窗元件，然後針對彈出式內容執行程式碼分割作業。如此一來，他們就能縮減初始要求的大小。

建議您結合彈出式視窗與 CSS 錨定定位 (即將於 Chrome 推出)，以將這些彈出式視窗與其他元素相對的位置。舉例來說，這對選單和工具提示來說很有幫助。

資源

請瀏覽本系列的其他文章，瞭解使用新的 CSS 和 UI 功能 (例如捲動式動畫、彈出式視窗、容器查詢和 has() 選取器) 可帶來哪些益處的電子商務公司。