小點心，顧名思義，開箱即食，拿來即用。

獻上第二個小點心：SlidePopup。

GitHub

在線演示

GitHub 上歡迎大家來找茬^_^

前端朋友們，今天要介紹的這款小點心牛B了。相信是個前端都應該接觸過這種效果，而且是非常流行的交互。

閑話少敘，先上效果圖：

基本使用

多個可自定義的選項

來不及解釋了，立即查看示例。

這種彈窗的使用場景主要出現在移動端。

先定一個小目標：

• 易用性，如果自己都覺得難用，那就沒有分享的必要了￣□￣｜｜；
• 兼容性，兼容主流瀏覽器，但並非所有（比如 IE 低版本）；
• 移動優先，主要為移動端做更多的考慮；

為了以後不必再為寫這種效果煩心，特此寫了【底部浮現彈窗】小插件。

使用

和 通用彈窗(NormalPopup) 幾乎相同的API，因為他們繼承自同一個父類，這正是面向對象的巨大魅力。

註意事項：遮罩和主體分離
不同於 通用彈窗(NormalPopup)，使用 SlidePopup 時最好彈窗的遮罩和主體是分離的（相信你可以通過組織 html 結構和 css 樣式輕松做到這點），因為需要對遮罩和主體執行不同的動畫，遮罩是做漸現效果，而主體是做上滑效果，如果遮罩和主體纏在一塊，結果你懂的。

最佳實踐： 請矢誌不渝地做好遮罩和主體分離^_^

下面是 SlidePopup 最簡單的使用：

const popupA = new SlidePopup({
    popup
 
: '#popup-A',
    openBtn: '.open-popup-A',
    closeBtn: '.close-popup-A',
})
 

簡單，簡單是很重要的。【盡可能簡單】是在設計小點心系列 API 時的第一原則。

雷區

這裏有一些在使用 SlidePopup 時容易導致 bug 的地方，其中的大部分都不容易碰到，但為了避免你在遇到它們時大罵“沃特法克”，請仔細閱讀它們。

popup 上禁止 transform

SlidePopup 內部通過操作 transform 樣式制造 css3 動畫。為什麽選擇 transform

相信我，通過精心組織 html 結構和 css 樣式是很容易做到這一點的。So，make me happy，make you easy^_^

最佳實踐： 精心組織 html 和 css，始終不在 popup 上 transform。

popup 樣式覆蓋

為了使用起來盡可能方便，SlidePopup 將樣式封裝在了插件內部，否則就需要像 Swiper 那樣引入一個 js 文件，再引入一個 css 文件，再小心翼翼地往 html 上添加 css 類名。

由於是從【底部】浮現，不是左，不是右，不是上，而是底部。因此，SlidePopup 會給 popup 添加一些樣式以確保彈窗在【底部】：

position: fixed !important;
top: auto !important;
bottom: 0 !important;
margin-bottom: 0 !important;
 

這幾行樣式可以確保彈窗是從【底部】冉冉升起的，一般彈窗的樣式是不會與這幾行沖突的，如果你執意要跟這幾行對著幹，那麽結果可能不會盡如人意。

最佳實踐：請務必保證上面幾行樣式生效。

移動端 cursor:pointer

這不是本插件應該註意的，而是整個移動前端開發都應該註意的。某些 iPhone 機型上如果【可點擊元素】沒有設置這個樣式，將不會觸發點擊事件。所以確保你在可點擊元素上設置了 cursor:pointer。在使用本插件時，那些打開按鈕，關閉按鈕，點擊遮罩關閉，點擊 document 空白區域關閉彈窗等等可點擊的元素 SlidePopup 都沒有做添加 cursor:pointer 處理，都需要使用者在編寫樣式時自行加上。

最佳實踐：在【可點擊元素】上設置 cursor:pointer。

文件列表

ES6小點心第二彈——底部浮現彈窗