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

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

獻上第二個小點心：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? transform 的 3D 變換可觸發硬件加速，從而打造絲般順滑的動畫體驗。這是跟着 Swiper 老哥學的^_^。實際上，若是你在 popup 上應用了 transform，SlidePopup 會報錯(throw Error)，程序會直接掛掉，小點心也是有脾氣的。因此你沒必要記住它，SlidePopup 會在控制檯提示你。

相信我，經過精心組織 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。

文件列表

小點心	UMD(Development)	UMD(Production)	ES Module
Full	es6Dessert.js (17.35kb)	es6Dessert.min.js (8.11kb)	es6Dessert.esm.js (11.66kb)
通用彈窗	NormalPopup.js (10.23kb)	NormalPopup.min.js (4.83kb)	NormalPopup.esm.js (6.56kb)
底部浮現彈窗	SlidePopup.js (15.35kb)	SlidePopup.min.js (7.14kb)	SlidePopup.esm.js (10.29kb)