作者：赛冷思
个人博客：sailengsi.com
github：github.com/sailengsi/sls-jquery-modal
demo演示地址：demo.sailengsi.com/sls-jquery-modal/src/release/
欢迎您查看这款弹框插件文档，如有发现不对之处或有什么建议，可到 github.com/sailengsi/sls-jquery-modal/issues 提出。
此插件基于jquery，使用本文档中的实例代码前，请务必确保你已经引入jquery。
npm install sls-jquery-modal
git clone git@github.com:sailengsi/sls-jquery-modal.git
此项目是采用fis编写，fis文档：fis.baidu.com
目录结构如下：
sls-jquery-modal 项目目录
doc 文档目录
src 开发源码
dev 此目录是fis开发源码，不可在浏览器上直接运行
release fis编译后的目录
cd ./sls-jquery-modal/src/dev
npm install
npm start
npm start 之后浏览器会自动打开，启动这个项目，此时浏览器访问的是src/release目录。
插件暴露给外部一个全局变量SlsModal。
简单示例：
SlsModal.init().show();
全局对象的init方法用来初始化配置一些自定义参数，具体参数请看下面介绍
以下四个回调，分别在弹框 显示/关闭 前后调用。注意：如果是手动关闭弹框，关闭前后的回调将不会执行。
四个回调的上下文均指向当前弹框对象SlsModal
onShowBefore: function() {}, //显示框之前的回调
onShowAfter: function() {}, //显示框之后的回调
onCloseBefore: function() {}, //关闭框之前的回调
onCloseAfter: function() {}, //关闭框之后的回调
SlsModal.init({
//显示框之前的回调，this指向当前层的DOM对象
onShowBefore: function() {
console.log(this);//SlsModal对象
console.log('框显示前调用');
},
//显示框之后的回调，this指向当前层的DOM对象
onShowAfter: function() {
console.log(this);//SlsModal对象
console.log('框显示后调用');
$(".callback").html('框显示了。');
},
//关闭框之前的回调
onCloseBefore: function(el,index) {
console.log(el);//当前点击的dom元素对象
console.log(index);//如果点击的是按钮，便是按钮的索引，否则没有值
console.log(this);//SlsModal对象
console.log('框关闭前调用');
},
//关闭框之后的回调
onCloseAfter: function(el,index) {
console.log(el);//当前点击的dom元素对象
console.log(index);//如果点击的是按钮，便是按钮的索引，否则没有值
console.log(this);//SlsModal对象
console.log('框关闭后调用');
$(".callback").html('框关闭了。');
},
}).show();
默认为false，设为true，点击右上角x号不会自动关闭。
此回调必须在isClickClose为true时才有效，回调上下文指向当前弹框SlsModal对象。
返回一个参数：当前点击的dom元素对象
SlsModal.init({
isClickClose:false,
body:'这个框，你点击右上角x号不会自动关闭了，只能手工在onClickClose回调中手工关闭。',
onClickClose:function(el){
console.log(this);//=>当前弹框对象SlsModal
console.log(el);//=>当前点击的按钮dom元素对象
console.log('点击右上角x号关闭前');
//关闭，你可以在这前后处理你的逻辑
this.close();
console.log('点击右上角x号关闭后');
}
}).show();
默认为false，设为true，点击按钮不会自动关闭。
此回调必须在isClickBtn为true时才有效，回调上下文指向当前弹框SlsModal对象。
并且返回两个参数：
SlsModal.init({
isClickBtn:false,
body:'这个框，你点击按钮不会自动关闭了，只能手工在onClickBtn回调中手工关闭。',
onClickBtn:function(el,index){
console.log(this);//=>当前弹框对象SlsModal
console.log(el);//=>当前点击的按钮dom元素对象
console.log(index);//当前点击的按钮索引
console.log('点击按钮关闭前');
//关闭，你可以在这前后处理你的逻辑
this.close();
console.log('点击按钮关闭后');
}
}).show();
默认为false，设为true，点背景不会自动关闭。
此回调必须在isClickBg为true时才有效，回调上下文指向当前弹框SlsModal对象。
返回一个参数：当前点击的dom元素对象
SlsModal.init({
isClickBg:false,
body:'这个框，你点击背景遮罩不会自动关闭了，只能手工在onClickBg回调中手工关闭。',
onClickBg:function(el){
console.log(this);//=>当前弹框对象SlsModal
console.log(el);//=>当前点击的元素
console.log('点击背景关闭前');
//关闭，你可以在这前后处理你的逻辑
this.close();
console.log('点击背景关闭后');
}
}).show();
是否开启自动关闭，默认为true:开启。设为false时，没有与之对应的回调，如果再想关闭，只能通过自己绑定事件关闭。
SlsModal.init({
isAutoClose:false,
body:'这个框，你只能只能通过手工绑定关闭事件,点击右上角x号关闭了。'
}).show();
//手工点击右上角关闭
$("body").on('click','.sls-modal-close',function(){
SlsModal.close();
});
是否显示右上角的x号，默认为true:显示。
SlsModal.init({
isShowClose:false
}).show();
弹框标题内容。如果不想显示标题，设置成空字符串或者false即可。
SlsModal.init({
header:false,
}).show();
弹框内容。不可不空。
SlsModal.init({
header:'自定义标题',
body:'自定义内容'
}).show();
弹框底部内容。
SlsModal.init({
footer:'自定义底部内容'
}).show();
此属性用来设置按钮，值类型为数组，数组中的每个元素为对象，对象中含有三个属性：
- text:'按钮文本内容', //必选
- type: '按钮类型' //可选,默认为default，插件提供五种类型:default,info,warning,danger,success
- className:'自定义的class' //可选
SlsModal.init({
btns:[{
text:'默认',
},{
text:'信息',
type:'info'
},{
text:'警告',
type:'warning'
},{
text:'删除',
type:'danger'
},{
text:'成功',
type:'success'
}]
}).show();
插件内部先找footer属性，如果footer属性找不到，再找btns按钮，所以footer优先级高于btns按钮。
默认footer为空，btns为两个按钮。所以，两者都不设置的话，默认显示按钮。
如果不想要显示底部，只需要将btns设置为false即可。
设置框的宽度，默认宽为420px。支持百分之和固定大小两种类型:
- width:'600px' //宽为600px。
- width: '60%' //宽为百分之60%
SlsModal.init({
width:'800px',
body:'<strong>这个宽度是固定800px</strong>'
}).show();
SlsModal.init({
width:'30%',
body:'<strong>这个宽度是自适应50%</strong>'
}).show();
弹框默认水平垂直居中。这个属性是在垂直居中的基础上，向上的偏移量。
SlsModal.init({
offsetTop:100,
body:'<strong>这个是通过配置offsetTop:100;使弹框向上偏移100px</strong>'
}).show();
弹框固定距离顶部的距离。
SlsModal.init({
top:60,
body:'<strong>这个是固定距离顶部60px</strong>'
}).show();
top优先级高于offsetTop。如果两者都设置了，插件最终以top的值为准。
此方法用来显示弹框，必须在init方法初始化后才可调用
此方法用来关闭弹框
感谢您腾出宝贵的时间来查阅这份文档，谢谢，