# 简介
作者：赛冷思

个人博客：sailengsi.com

github：github.com/sailengsi

demo演示地址：demo.sailengsi.com/sls-jquery-modal/release

欢迎您查看这款弹框插件文档，如有发现不对之处或有什么建议，可到 github.com/sailengsi/sls-jquery-modal/issues 提出。

## 使用说明
此插件基于jquery，使用本文档中的实例代码前，请务必确保你已经引入jquery。

## npm安装
```
npm install sls-jquery-modal
```
## git安装
```
git clone git@github.com:sailengsi/sls-jquery-modal.git
```
## demo说明
此项目是采用fis编写，fis文档：fis.baidu.com

目录结构如下：
    - sls-jquery-modal      项目目录
        - dev                此目录是fis开发源码，不可在浏览器上直接运行
    

首先，进入dev目录
    - npm install
    - npm run build 这一步会在项目根目录中创建release目录，由dev目录编译而成
    - npm start
npm start 之后浏览器会自动打开，启动这个项目，此时浏览器访问的是release目录。


# 全局对象SlsModal
插件暴露给外部一个全局变量SlsModal。

简单示例：
```
SlsModal.init().show();
```

## init(options)
全局对象的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();
```

### isClickClose属性
默认为false，设为true，点击右上角x号不会自动关闭。


### onClickClose回调
此回调必须在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();
```

### isClickBtn属性
默认为false，设为true，点击按钮不会自动关闭。

### onClickBtn回调
此回调必须在isClickBtn为true时才有效，回调上下文指向当前弹框SlsModal对象。

并且返回两个参数：
- 当前点击的dom元素对象
- 当前点击的按钮索引

```
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();
```

### isClickBg属性
默认为false，设为true，点背景不会自动关闭。

### onClickBg回调
此回调必须在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();
```

### isAutoClose属性
是否开启自动关闭，默认为true:开启。设为false时，没有与之对应的回调，如果再想关闭，只能通过自己绑定事件关闭。
```
SlsModal.init({
    isAutoClose:false,
    body:'这个框，你只能只能通过手工绑定关闭事件,点击右上角x号关闭了。'
}).show();

//手工点击右上角关闭
$("body").on('click','.sls-modal-close',function(){
    SlsModal.close();
});
```

### isShowClose属性
是否显示右上角的x号，默认为true:显示。
```
SlsModal.init({
    isShowClose:false
}).show();
```

### header属性
弹框标题内容。如果不想显示标题，设置成空字符串或者false即可。
```
SlsModal.init({
    header:false,
}).show();
```

### body属性
弹框内容。不可不空。
```
SlsModal.init({
    header:'自定义标题',
    body:'自定义内容'
}).show();
```

### footer属性
弹框底部内容。
```
SlsModal.init({
    footer:'自定义底部内容'
}).show();
```

### btns属性
此属性用来设置按钮，值类型为数组，数组中的每个元素为对象，对象中含有三个属性：
	- 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&btns优先级
插件内部先找footer属性，如果footer属性找不到，再找btns按钮，所以footer优先级高于btns按钮。

默认footer为空，btns为两个按钮。所以，两者都不设置的话，默认显示按钮。

如果不想要显示底部，只需要将btns设置为false即可。

### width属性
设置框的宽度，默认宽为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();
```

### offsetTop属性
弹框默认水平垂直居中。这个属性是在垂直居中的基础上，向上的偏移量。
```
SlsModal.init({
    offsetTop:100,
    body:'<strong>这个是通过配置offsetTop:100;使弹框向上偏移100px</strong>'
}).show();
```

### top属性
弹框固定距离顶部的距离。
```
SlsModal.init({
    top:60,
    body:'<strong>这个是固定距离顶部60px</strong>'
}).show();
```

### offsetTop&top优先级
top优先级高于offsetTop。如果两者都设置了，插件最终以top的值为准。


## show()
此方法用来显示弹框，必须在init方法初始化后才可调用

## close()
此方法用来关闭弹框


# 致谢
感谢您腾出宝贵的时间来查阅这份文档，谢谢，