弹出框（bootStrap模态框、bootbox、dbailog）

弹出框（bootStrap模态框、bootbox、dbailog）

最近这几天项目里要用 模态框 ，我找了好多，开始我们项目用的是dbailog的提示框，在我想使用bootstrap的模态框时，两者的js发生了冲突，出现闪退的情况。最后决定把dbailog换成bootbox.js。接下来我们来谈谈他们的使用。

一、bootStrap模态框

这个是菜鸟教程中的bootStrap模态框的链接，
http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

<div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" class="modal fade" style="display: none;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" data-dismiss="modal" aria-hidden="true" class="close">><span aria-hidden="true">&times;</span></button></button>
                <h4 id="myModalLabel" class="modal-title">修改密码</h4>
            </div>
            <span class="panel-body no-padding">
<br>
            <!--<div class="modal-body">-->
                <div class="form-group">
                    <label class="col-sm-2 control-label">新密码</label>
                    <div class="col-sm-10">
                        <input class="form-control input_userName" style="width:60%" id="newpassword" type="text"
                               th:maxlen="100" value="" name="newpassword"> *必填
                        <span id="newpassMsg">请输入新密码(英文字母数字组合)</span>
                        <span id="newpassErr" style="color: red"></span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">确认密码</label>
                    <div class="col-sm-10">
                        <input class="form-control" style="width:60%" id="repeatpassword" type="text"
                               th:maxlen="100" value="" name="repeatpassword"> *必填
                        <span id="passwd">请再次输入密码(英文字母数字组合)</span>
                        <span id="passwdErr" style="color: red"></span>
                    </div>
                </div>
            <!--</div>-->


            <div class="form-group">
                <label class="checkbox-inline">
                    <button type="button" class="btn btn-primary" onclick="save()">保存</button>
                    <button type="button" class="btn btn-warning" id="btnReturn" data-dismiss="modal">取消</button>
                </label>
            </div>
                  </span>
        </div>

    </div>

我在网上找一般只有按钮触发的事件，接下来我把button和标签的触发事件也贴出来

  <li><a href="#myModal" data-toggle="modal" data-target="#myModal" ><i class="lnr lnr-book"></i> <span >修改密码</span></a></li>
  <button type="button" class="btn btn-primary" data-toggle="modal"  data-target="#subModal">修改</button>
  
  

我把模态框的图贴出来，效果就是这样
二、modal打开：

2.1、静态打开：通过data属性打开隐藏模态框

设置按钮button的data-toggle:“modal”（以模态框的形式打开），data-target:"#myModal"（设置为modal的id）

2.2、动态打开：以jquery代码为例

$("#myModal").modal({
 
remote:"test/test.jsp";//可以填写一个url，会调用jquery load方法加载数据
 
backdrop:"static";//指定一个静态背景，当用户点击背景处，modal界面不会消失
 
keyboard:true;//当按下esc键时，modal框消失
 
})

remote处可以填写jsp路径或者html路径，用来给modal框注入内容

2.3、动态打开事件：

在modal框加载同时，提供几个方法用来控制modal框

$("#myModal").on("loaded.bs.modal",function{
 
//在模态框加载的同时做一些动作
 
});
 
$("#myModal").on("show.bs.modal",function{
 
//在show方法后调用
 
});
 
 
$("#myModal").on("shown.bs.modal",function{
 
//在模态框完全展示出来做一些动作
 
});
 
$("#myModal").on("hide.bs.modal",function{
 
//hide方法后调用
 
});
 
$("#myModal").on("hiden.bs.modal",function{
 
//监听模态框隐藏事件做一些动作
 
});

一些说明：

1、**Trigger的部分 **
为打开模态框，需要一个button或者link，需要包括2个data-*属性：

data-toggle="modal"表示打开一个模态框
data-target="#myModal"表示model的id
2、**Modal的部分**

<div>模态必须有一个id的值与data-target一致
类.modal，用来把 <div> 的内容识别为模态框
类.fade，当模态框被切换时，它会引起内容淡入淡出
role="dialog"提高了使用屏幕阅读器的人的可访问性
.modal-dialog设置模态的适当宽度和边距
modal-header 是为模态窗口的头部定义样式的类
modal-body用于为模态窗口的主体设置样式
modal-footer用于为模态窗口的底部设置样式
data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口
模态框的大小 
可通过modal-sm和modal-lg，设置模态框的大小
 <div class="modal-dialog" role="document">
 <div class="modal-dialog modal-lg" role="document">
 <div class="modal-dialog modal-full" role="document">

二、bootbox.js弹窗

为了不冲突使用bootbox.js

bootbox的所有版本都是在Bootstrap和jQuery的基础之上编写的，因此，使用 bootbox，还要引入jQuery和bootbox。引入需要注意两点

第一，bootstrap，jQuery和bootbox的版本要对应

第二，注意引用的顺序
对应版本

引入顺序

Bootbox version	Min. Bootstrap version	Max. Bootstrap	Min. jQuery
4.x.x Latest	3.0.0	3.3.x	1.9.1
3.x.x	2.2.2	2.3.2	1.8.3
2.x.x	2.0.0	2.0.4	1.7.1
1.x.x	1.3.0	1.4.0	1.7.1

<1>jQuery

<2>Bootstrap

<3>Bootbox，他的js文件可以去下边我贴出的链接中教程链接下载，

1. **警告 **

bootbox.alert(message, callback)

2. **提示 **
   bootbox.prompt(message, callback)
   
   提示框有好多我只选用了其中的一种，如果想使用时间，或者其他的可以参考
   http://bootboxjs.com/examples.html#bb-confirm-dialog bootbox的教程链接
   bootbox.prompt(message, callback)
   提示框如果输入了值，点击ok,则返回的就是对应输入的内容，如果我们想使用获取到的内容，我们可以拿到result作为data用ajax传到后端。但是点取消的时候，他返回的是null,我们可以这样操作。

 if(result==null){
                   bootbox.alert({
                       message:"您已取消修改!",
                       size:"small"
                   })

4. **确认 **
   bootbox.confirm(message, callback)
   
   
   

确认按钮，点击ok返回的是true,点击取消返回的false,

  bootbox.confirm('系统将恢复到初始化密码!', function(result){
            if(result==true){
            }else {
                bootbox.alert({
                    message: "您已取消",
                    size: "small"
                });
            }

https://www.cnblogs.com/landeanfen/p/5022188.html#commentform

https://blog.csdn.net/happiness2018/article/details/80948504 参考了这篇博客