# 封装bootstrap modal

**Repository Path**: oldIronCoffee/FengZhuangbootstrap-modal

## Basic Information

- **Project Name**: 封装bootstrap modal
- **Description**: 封装了bootstrap modal框
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-01-22
- **Last Updated**: 2020-12-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 封装bootstrap modal

自定义bootstrap modal框，不用在频繁复杂的添加一个又一个modal框，使页面简介，去掉繁琐冗余的重复代码


## 使用方法
### 1、引入css，js文件
```
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/nifty.min.css" rel="stylesheet" type="text/css">
```

```
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/nifty.min.js"></script>
<script src="js/bootstrap-alert.js"></script>
```
### 2、绑定点击按钮
```
<button class="btn btn-purple" onclick="openModal1();">点击我弹出modal框</button>
```
```
<button class="btn btn-warning" onclick="openModal2();">点击我弹出modal删除确认框</button>
```

### 3、初始化modal
```
function openModal1(){
    Modal.alert({
        msg:"this is a test alert!",
        title:"Iamoldwang",
        jumpPage:null,
        style:"green",
        btncl:"关闭"
    }).on(function (e) {
        if (e) {
            // do somethiong to delete
        }
    }).hide(function (e) {
        if (e) {
            // do somethiong to delete
        }
    });
}
```

```
function openModal2(){
    Modal.confirm({
        msg: "删除后数据不可恢复，请谨慎删除！",
        style:"red",
        title:"确认删除吗？",
        btnok:"确定删除",
        btncl:"取消删除"
    }).on(function (e) {
        if (e) {
            // do somethiong to delete
            Modal.alert({msg:"删除成功！",title:"删除成功！"});
        }
    }).hide(function (e) {
        if (e) {
            // do somethiong to delete
        }
    });
}
```

### 4、配置说明
1. msg：弹出框内容
2. title：弹出框标题
3. jumpPage：点击关闭或者取消后跳转到制定页面
4. style：弹出框字体颜色
5. btnok：ok按钮里显示的内容
6. btncl：cancel按钮里显示的内容

### 5、图片说明
![输入图片说明](https://gitee.com/uploads/images/2018/0122/113605_36ca369a_1744678.png "微信图片_20180122113448.png")

![输入图片说明](https://gitee.com/uploads/images/2018/0122/113621_a678e531_1744678.png "微信图片_20180122113453.png")

![输入图片说明](https://gitee.com/uploads/images/2018/0122/113631_419a4e41_1744678.png "微信图片_20180122113458.png")