彈出式視窗在網路上隨處可見。您可以在選單、切換提示和對話方塊中看到這些圖示,用於帳戶設定、揭露資訊小工具和產品資訊卡預覽等功能。儘管這些元件相當普遍,但在瀏覽器中建構這些元件仍相當費時。為解決這個問題,我們將為瀏覽器提供一組新的宣告式 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% 的程式碼行數。
使用 Popover API 時的注意事項
Tokopedia 使用 React,因此團隊針對不使用 popover 的網頁卸載 popover 元件,然後為 popover 內容執行程式碼分割,以達到程式碼分割的效果。這樣一來,他們就縮減了初始要求的大小。
建議您將彈出式視窗與 CSS 錨點定位 (即將在 Chrome 推出) 結合使用,以便將彈出式視窗定位在其他元素的相對位置。這對於選單和工具提示來說相當實用。
資源
- 推出 popover API
- 彈出式視窗和對話方塊的差異
- 您想回報錯誤或要求新增功能嗎?歡迎與我們分享你的意見。
請參閱本系列的其他文章,瞭解電子商務公司如何透過使用新的 CSS 和 UI 功能 (例如捲動驅動動畫、彈出式視窗、容器查詢和 has()
選取器) 獲益。