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)