在各种Web开发过程中，对话框和提示框的处理是很常见的一种界面处理技术，用得好，可以给用户很好的页面体验，Bootstrap开发也一样，我们往往在页面新增、编辑、查看详细等界面使用弹出对话框层的方式进行显示数据，删除则可能使用一个提示确认框，如果操作成功，我们可以使用更丰富的提示框来处理，本篇主要对比说明在Bootstrap开发中用到的这些技术要点。
1、Bootstrap对话框的使用
常规的Bootstrap有几种尺寸的对话框，包括默认状态的小对话框，中等宽度的对话框，和全尺寸的对话框几种，Bootstrap的对话框界面非常友好， 当我们使用ESC键或者鼠标单击其他空白处，则会自动隐藏对话框的。
它们的定义只是class不同，如下面是默认的小对话框界面代码：
<!--------------------------添加/修改信息的弹出层----------------------------> <div tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-hidden="true"></button> <h4> <i></i> <span>添加信息</span> </h4> </div> <form action="" data-toggle="validator" enctype="multipart/form-data"> <div> <div> <div> <div> <label>父ID</label> <div> <select type="text" placeholder="父ID..." ></select> </div> </div> </div> <div> <div> <label>名称</label> <div> <input type="text" placeholder="名称..." /> </div> </div> </div> <div> <div> <label>备注</label> <div> <textarea placeholder="备注..."></textarea> </div> </div> </div> </div> </div> <div> <input type="hidden" /> <button type="submit">确定</button> <button type="button" data-dismiss="modal">取消</button> </div> </form> </div> </div> </div>
大概的界面如下所示：
注意上面代码里面的对话框样式代码，如下：
<div>
如果是其他两个尺寸的数据库，也只需要修改这里即可，如下所示两种代码分别是：
<div>
以及
<div>
我们可以根据界面元素的布局，来决定采用哪个尺寸的对话框层定义，不过他们这几个对话框的调用方式是一致的。
打开对话框界面如下所示：
//显示可以选择客户 $("#btnSelectCustomer").show();
关闭对话框界面如下所示:
$("#add").modal("hide");
一般情况下，我们弹出的对话框就是一个表单，可以执行类似保存数据的提交操作的，因此需要对表单的数据进行验证，如果有错误，我们可能需要在界面上提醒，因此在页面初始化的时候，需要初始化表单的验证规则，下面是我们常规的表单初始化操作。
//绑定相关事件 function BindEvent() { //判断表单的信息是否通过验证 $("#ffAdd").validate({ meta: "validate", errorElement: 'span', errorClass: 'help-block help-block-error', focusInvalid: false, highlight: function (element) { $(element).closest('.form-group').addClass('has-error'); }, success: function (label) { label.closest('.form-group').removeClass('has-error'); label.remove(); }, errorPlacement: function (error, element) { element.parent('div').append(error); }, submitHandler: function (form) { $("#add").modal("hide"); //构造参数发送给后台 var postData = $("#ffAdd").serializeArray(); $.post(url, postData, function (json) { var data = $.parseJSON(json); if (data.Success) { //增加肖像的上传处理 $('#file-Portrait').fileinput('upload'); //保存成功 1.关闭弹出层，2.刷新表格数据 showTips("保存成功"); Refresh(); } else { showError("保存失败:" + data.ErrorMessage, 3000); } }).error(function () { showTips("您未被授权使用该功能，请联系管理员进行处理。"); }); } }); }
但是一般这些代码都会重复很多，因此我们可以封装函数的方式，重用部分代码，从而使用更简洁的处理代码，但同样能达到目的。
//绑定相关事件 function BindEvent() { //添加、编辑记录的窗体处理 formValidate("ffAdd", function (form) { $("#add").modal("hide"); //构造参数发送给后台 var postData = $("#ffAdd").serializeArray(); $.post(url, postData, function (json) { var data = $.parseJSON(json); if (data.Success) { //保存成功 1.关闭弹出层，2.刷新表格数据 showTips("保存成功"); Refresh(); } else { showError("保存失败:" + data.ErrorMessage, 3000); } }).error(function () { showTips("您未被授权使用该功能，请联系管理员进行处理。"); }); }); }
2、删除确认的对话框处理
1）bootbox插件的使用