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)