Bootstrap技术: 模式对话框的使用
一、概述
说到模式对话框，大家肯定都会想到windows下GUI程序，在gui程序中，有大量的对话框。 在web程序中，随着页面交互式功能的增多，有很多场景下也会用到对话框。在html原生的支持下，有alert, confirm,propmt 三种基本的模式对话框。简单好用，但它们的问题是样式比较难看，与一些优秀的页面框架的样式难以一致，用户体验较差。
基于web页面的本质，如果自己实现对话框，实现的对话框本质上就是一个web元素快（如div），只是将其显示成一个对话框的样子（有边框，有标题栏、关闭按钮等），可以显示，可以关闭。
利用html元素包装的对话框，与html原生的几个对话框一个非常本质的差别是，html原生的对话框是堵塞型的，是真正的对话框，而采用html元素包装的对话框是无法做到包装的。比如：
function fun(){
.........
var re = confirm("真的要删除吗？");
if(re){
......
}
else{
......
}
}
上面的代码中, confirm调用会弹出一个确认对话框，这时这个对话框在被关闭前，会堵塞下面代码（if语句块）的执行，直到该对话框被关闭，返回结果后，下面的代码才会被执行。
但是如果是自己来采用html元素封装对话框，是无法实现这种堵塞的，需要利用回调函数来实现。也就是说，我们无法自己封装一个类似的confirm方法，让 一个堵塞的对话框。 这点区别非常重要，尤其是自己来实现web页面中的对话框时。
bootstrap是目前一种流行的web界面框架，提供了丰富的样式，视觉效果较好。它也对模式对话框提供了底层的支持。本篇文章介绍如何实现和应用bootstrap样式的模式对话框。
二、一个简单例子
首先来看一个最简单的例子，在html页面内，最好在body节点下（不要放在其它节点下，避免形成干扰）建立要显示的对话框内容。如：
<body>
……..
<div class="modal fade" style="border:1px solid red;width:200px;height:150px;</div>
</body>
这时运行页面，该对话框是不显示的。该对话框与普通的div元素相比，唯一区别就是设置了一个modal fade的class样式。
下面我们看看怎么通过js调用显示该对话框。其实很简单，只用一句代码：
$("#myModal2").modal();
显然，该对话框上没任何信息，样式也很难看，没有任何作用。
不过Bootstrap已经提供了很多界面美好的对话框样式，我们可以直接使用。下面我们继续介绍。
三、alert对话框的实现
下面我们实现一个类似alert功能的对话框，首先编写html代码，为对话框的内容。
<div class="modal fade" role="dialog" tabindex="-1" id="myModal2"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">提示</h4> </div> <div class="modal-body"> 操作出现错误！ </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" >确定</button> </div> </div> </div> </div>
可以看出，上面的是一个标准的对话框（这里是一个提示框），有标题栏（在样式为modal- header的div内，包括一个关闭按钮），有正文部分（在样式为modal-body的div内），有操作按钮（在样式为modal- footer的div内，上面代码只有一个按钮，可以自己加多个）。
现在有js调用显示该对话框： $("#myModal2").modal();
对话框界面会显示出来。这时
我们会发现进行如下几种操作，该对话框会关闭：
1） 点击最右上角的 x 按钮
2） 点击对话框外的背景部分
3） 按下 Ese 键
其中1）很正常。
对于2）如果我们希望点击对话框外的背景部分，对话框不会关闭（大部分场景下我们希望如此效果），只需在js调用modal方法时传入设置参数即可，如：
$("#myModal2").modal({backdrop:'static'});
这是再去点击对话框外的背景部分，不会关闭。
如果我们希望按下 Ese 键对话框也不会关闭，只需增加新的配置项即可，如：
$("#myModal2").modal({backdrop:'static',keyboard: false});
这时我们无论是点击对话框外的背景部分，还是按下Ese键，对话框都不会关闭。
还存在一个问题，对于提示框，一般点击“确定”按钮，对话框也会关闭，那这怎么实现呢？有个最简单的方法，就是为button元素增加一个data-dismiss值为modal的属性即可。如：
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
</div>
加上了这个属性后，当对话框显示时，点击这个确定按钮，对话框就会关闭了。
需要特别注意的是：Bootstrap中的模式对话框，虽然从界面上说是模式的，比如有背景，当设置backdrop:'static'时，背景是不响应操作的。但是与alert等标准对话框比，modal方法的调用却不会让js代码堵塞在这里（这个在前面已经有综合介绍，这里再详细举例介绍下），该语句下的代码会继续执行。如：
$("#myModal2").modal({backdrop:'static',keyboard: false});
$("#findTextId").val("hello");
上面的代码，调用modal语句后，会显示对话框，但后面的$("#findTextId").val("hello")语句会被执行。也就是说modal语句不会堵塞住。我们再看标准的 alert语句：
alert("操作出现错误");
$("#findTextId").val("hello");
上面的代码，alert语句执行后，显示对话框，但在该对话框被关闭前，$("#findTextId").val("hello")语句不会被执行。也就是说alert语句会堵塞住。
所有，如果在一个函数内，通过调用modal语句希望显示对话框后，后面的代码不会被执行，就不要忘了在modal语句后加上return语句。
四、confirm功能对话框的实现
下面我们实现一个类似confirm功能的对话框，首先编写html代码，为对话框的内容。
<div class="modal fade" role="dialog" tabindex="-1" id="myModal2"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">确认</h4> </div> <div class="modal-body"> 真的要删除该记录吗？ </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal" id="okModalBtn">确定</button> <button type="button" class="btn btn-primary" data-dismiss="modal">取消</button> </div> </div> </div> </div>
与提示框，相比，增加了一个按钮。但最核心的区别是我们希望调用确认框后，当对话框关闭后，后续的代码知道对话框是确定关闭的，还是取消关闭的。理想上，我们希望的调用代码如：
var re = $("#myModal2").modal({backdrop:'static',keyboard: false});
if(re){
doSometing();
}
else{
doOtherSometing();
}
那如何支持上面的代码呢？
实际上是不可能按上面的方式实现的。因为前面也讲了，Bootstrap上的对话框只是界面上看上去是模式的，但代码层面无法堵塞，modal方法根本无法堵塞住，也没法返回值。
要实现点击不同按钮有不同的处理的逻辑，需要自己写额外代码处理。这里给出一种解决方案，代码如：
function deleteObj (para){
$("#okModalBtn").unbind("click");
$("#okModalBtn").click(function(){
doAction(para);
});
$("#myModal2").modal({backdrop:'static',keyboard: false});
}
deleteObj方法是被调用显示对话框，上面代码中的 okModalBtn 是为对话框中确定按钮的id值（目的是为了获取到该元素，当然也可以通过别的方式）。当deleteObj方法被调用时，首先我们为确定按钮解除click事件，然后再绑定click事件。最后调用modal方法显示对话框。需要注意的是，采用上面的方式，一定要先解除click事件，否则的话每打开一次对话框都会绑定一次click事件，就存在绑定多个响应的问题。
五、输入对话框的实现
下面我们实现一个类似prompt功能的对话框，可以弹出对话框让用户输入信息。首先编写html代码，为对话框的内容。
<div class="modal fade" role="dialog" id="myModal5"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">输入信息</h4> </div> <div class="modal-body"> <div class="form-group"> <label>请输入信息 <span id="hintTextId" style="color:red;display:none">*输入信息不允许为空！<span></label> <input type="text" class="form-control" id="inputTextId" required autofocus> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" id="okModalBtn5">确定</button> <button type="button" class="btn btn-primary" data-dismiss="modal">取消</button> </div> </div> </div> </div>
与确认对话框相比，就是对话框内容部分增加了一个输入框。注意
这里确定按钮没有设置自动关闭对话框，因为需要检查输入框的内容，如果输入框没有输入信息，点击确定按钮，会给出提示，并且对话框不会关闭。对话框通过js代码进行关闭。相应的调用代码如：
function call(){
$("#okModalBtn5").unbind("click");
$("#okModalBtn5").click(function(){
if(!$("#inputTextId").val()){
$("#hintTextId").css("display","");
$("#inputTextId").focus();
return;
}
alert($("#inputTextId").val()); //处理数据
$("#myModal5").modal("hide");
});
$("#hintTextId").css("display","none");
$("#myModal5").modal({backdrop:'static',keyboard: false});
}
实现了上面的输入对话框，再复杂的对话框，其区别只是对话框中的内容差别了，这里只是一个简单的输入框，可以放置更多、更复杂的界面元素。
六、小结
上面介绍了，在bootstrap框架中如何实现和使用几种最基本和常用的对话框。完全可以在这基础上实现更为复杂的对话框。一些其它细节信息可以参考bootstrap的官方文档。
