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

彈出式視窗個案研究

Swetha Gopalakrishnan

Saurabh Rajpal

網路無所不在，你可以透過選單、切換鈕對話方塊，用於帳戶設定、揭露小工具等等產品資訊卡預覽儘管這些元件相當常見，仍須建構這些元件仍令人感到意外。為瞭解決這個問題，用於建構彈出式視窗的宣告式 HTML API 會導入瀏覽器，也就是 Popover API

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

瀏覽器支援

資料來源

彈出式視窗常造成與對話方塊混淆，不過使用者的行為差異使用 dialog.showModal 開啟的 dialog 元素 (強制回應對話方塊) 是一種影片體驗，需要使用者明確進行互動才能關閉互動視窗popover 支援光源關閉。強制回應 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 狀態變更為開啟互動視窗。在使用彈出式 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,
  },
});

為了配合不支援彈出式視窗 API 的瀏覽器，Tokopedia 實作奇數鳥的 popover-polyfill 使用 gzip 壓縮時，只有 3.2 KB他們對 polyfill 感到滿意測試順利進行，不會導致效能降低。整體來說透過彈出式視窗 API，成功減少 React 中的高達 70% 的程式碼行。

Tokopedia 使用 React，而該團隊藉由卸載針對不使用該元件的網頁，然後將程式碼分割成彈出式內容。這樣就能縮減初始要求的大小。

考慮結合彈出式視窗與 CSS 錨定位置 (即將支援 Chrome)。來相對放置這些元素舉例來說，這項功能適用於選單和工具提示。

資源

探索本系列的其他文章，瞭解電子商務的運作方式公司在使用全新 CSS 和 UI 功能 (例如捲動式介面) 時獲得良好成效動畫、彈出式視窗、容器查詢和 has() 選取器。

彈出式視窗個案研究

Tokopedia

程式碼

使用 Popover API 的注意事項

資源