彈出式視窗無遠弗屆,您可以在選單、切換提示和對話方塊中看到這些項目,用於帳戶設定、揭露事項小工具和產品資訊卡預覽等功能。儘管這些元件相當普遍,但在瀏覽器中建構這些元件仍相當麻煩。為解決此問題,瀏覽器即將推出一組用於建立彈出式視窗的宣告式 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
以動畫呈現彈出式視窗的開啟和關閉行為。—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 推出),以將這些彈出式視窗與其他元素相對的位置。舉例來說,這對選單和工具提示來說很有幫助。
資源
- 彈出式 API 簡介
- 彈出式視窗和對話方塊的差異
- 您要回報錯誤或提出新功能建議嗎?我們想聽聽您的看法。
請瀏覽本系列的其他文章,瞭解使用新的 CSS 和 UI 功能 (例如捲動式動畫、彈出式視窗、容器查詢和 has()
選取器) 可帶來哪些益處的電子商務公司。