基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
在各种Web开发过程中，对话框和提示 框的处理是很常见的一种界面处理技术，用得好，可以给用户 很好的页面 体验，Bootstrap开发也一样，我们往往在页面 新增、编辑、查看详细等界面使用弹出对话框层的方式进行显示 数据，删除 则可能使用一个提示 确认框，如果操作成功，我们可以使用更丰富的提示 框来处理，本篇主要对比说明在Bootstrap开发中用到的这些技术要点。
1、Bootstrap对话框的使用
常规的Bootstrap有几种尺寸的对话框，包括 默认状态的小对话框，中等宽度的对话框，和全尺寸的对话框几种，Bootstrap的对话框界面非常友好， 当我们使用ESC键或者鼠标单击其他空白处，则会自动 隐藏对话框的。
它们的定义只是class不同，如下面是默认的小对话框界面代码 ：
大概的界面如下所示：
注意上面代码 里面的对话框样式代码 ，如下：
如果是其他两个尺寸的数据库 ，也只需要修改 这里即可，如下所示两种代码 分别是：
以及
我们可以根据界面元素的布局，来决定采用哪个尺寸的对话框层定义，不过他们这几个对话框的调用 方式是一致的。
打开对话框界面如下所示：
显示可以选择客户
$("#btnSelectCustomer").show();
关闭 对话框界面如下所示:
一般情况下，我们弹出的对话框就是一个表单，可以执行类似保存数据的提交操作的，因此需要对表单的数据进行验证，如果有错误 ，我们可能需要在界面上提醒，因此在页面 初始化的时候，需要初始化表单的验证规则，下面是我们常规的表单初始化操作。
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("您未被授权使用该
功能 ，请联系
管理员 进行处理。");
});
}
});
}
但是一般这些代码 都会重复很多，因此我们可以封装函数 的方式，重用部分代码 ，从而使用更简洁的处理代码 ，但同样能达到目的。
添加、编辑记录的窗体处理
formValidate("ffAdd",function (form) {
$("#add").modal("hide");
//构造参数发送给
后台
var postData = $("#ffAdd").serializeArray();
$.post(url,function (json) {
var data = $.parseJSON(json);
if (data.Success) {
//保存成功 1.
关闭 弹出层，2.刷新表格数据
showTips("保存成功");
Refresh();
}
else {
showError("保存失败:" + data.ErrorMessage,3000);
}
}).error(function () {
showTips("您未被授权使用该
功能 ，请联系
管理员 进行处理。");
});
});
}
2、删除 确认的对话框处理
除了上面的常规对话框，我们还经常碰到一种简洁的确认对话框，虽然也可以使用上面的代码 来构建一个确认对话框，不过一般情况下不需要这么麻烦的，可以使用插件 bootBox 的确认对话框来进行处理。
BootBox .js是一个小的JavaScript库，它帮助您在使用bootstrap框架的时候快速 的创建一个对话框，也可以帮您创建，管理或删除 任何所需的DOM元素或js事件处理程序。
bootBox .js使用三方法 设计模仿他们的本地JavaScript一些方法 。他们确切的方法 签名是灵活的每个可以采取各种参数定制标签 和指定缺省值，但它们通常被称为一样：
Box.alert(message,callback)
Box.prompt(message,callback)
Box.confirm(message,callback)
唯一需要的参数是alert是 message; callback是必需的 confirm 和 prompt 调用 以确定用户 的响应。甚至当调用 警报回调是确定当用户 驳回对话框由于我们的包装方法 不能不要块 像他们的母语是有用的：他们是异步而非同步。
这三种方法 调用 四分之一个公共方法 ，你也可以使用你自己的自定义 对话框创建 ：
Box.dialog(options)
更多api帮助文档请参见：
Alert
Confirm
或者代码：
Prompt
"+result+"");
}
});
Custom Dialog
使用代码和界面效果如下所示：
2）
2）sweetalert插件的使用
虽然上面的效果非常符合Bootstrap的风格，不过界面略显单调。上面的效果不是我很喜欢这种风格，我遇到一个看起来更加美观的效果，如下所示。
这个效果是引入插件sweetalert（）实现的。
提示",text: newtips,type: "warning",showCancelButton: true,confirmButtonColor: "#DD6B55",cancelButtonText: "取消",confirmButtonText: "是的，执行
删除 ！",clo
SEO nConfirm: true
},function () {
delFunction();
});
上面的界面效果 类似的实现代码 如下所示：
一般它的弹出框代码 可以做的很简单，如下所示。
3、信息提示 框的处理
上面两种处理，都是利用弹出对话框进行实现的，而且对界面有阻塞的，一般情况下，我们做信息提示 效果 ，希望它不要影响我们进一步的操作，或者至少提供一个很短的自动 消失效果 。
那么这里我们就来介绍下jNotify插件 和toastr插件 了。
1）jNotify提示 框的使用
jNotify提示 框，一款优秀的jQuery结果提示 框插件 。我们在提交表单后，通过Ajax响应后台 返回结果，并在前台 显示 返回信息，jNotify能非常优雅的显示 操作结果信息。jNotify是一款基于jQuery的信息提示 插件 ，它支持 操作成功、操作失败和操作提醒三种信息提示 方式。jNotify浏览器兼容性非常好，支持 更改提示 内容 ，支持 定位提示 框的位置，可配置插件 参数。
个人资料！");
jNotify的参数详细配置：
自动隐藏
提示 条
clickOverlay : false,// 是否单击遮罩层才
关闭 提示 条
MinWidth : 200,// 最小宽度
TimeShown : 1500,//
显示 时间：毫秒
ShowTimeEffect : 200,//
显示 到
页面 上所需时间：毫秒
HideTimeEffect : 200,// 从
页面 上消失所需时间：毫秒
LongTrip : 15,// 当
提示 条
显示 和隐藏时的位移
HorizontalPosition : "right",// 水平位置:left,center,right
VerticalPosition : "bottom",// 垂直位置：top,bottom
ShowOverlay : true,// 是否
显示 遮罩层
ColorOverlay : "#000",// 设置遮罩层的颜色
OpacityOverlay : 0.3,// 设置遮罩层的透明度
onClosed:fn //
关闭 提示 框
后执行 函数 ，可以再次
调用 其他jNotify。如上面的三个依次
调用 。
下面是我在脚本类里面封装的饿公用方法 ，用来实现提示 效果 的显示 的。
显示
错误 或
提示 信息（需要引用jNotify相关
文件 ）
function showError(tips,TimeShown,autoHide) {
jError(
tips,{
autoHide: autoHide || true,// added in v2.0
TimeShown: TimeShown || 1500,HorizontalPosition: 'center',VerticalPosition: 'top',ShowOverlay: true,ColorOverlay: '#000',onCompleted: function () { // added in v2.0
//alert('jNofity is completed !');
}
}
);
}
//
显示 提示 信息
function showTips(tips,autoHide) {
jSuccess(
tips,onCompleted: function () { // added in v2.0
//alert('jNofity is completed !');
}
}
);
}
这样我们在使用Ajax的POST方法 的时候，我们可以根据不同的需要进行提示 。
2）toastr插件 的使用
toastr是一个Javascript库用于创建Gnome/Growl风格，非阻塞的页面 消息提醒。，toastr可设定四种通知 模式：成功，出错，警告，提示 ，而提示 窗口的位置，动画效果 都可以通过能数来设置，在官方站可以通过勾选参数来生成 JS，非常的方便使用。
插件 地址是：
它可以分别创建如下几种效果 ：警告、危险、成功、提示 的对话框信息，效果 如下所示。
它的使用JS代码 如下所示。
显示一个警告,没有
标题
toastr.warning('My name is Inigo Montoya. You killed my father,prepare to die!')
//
显示 一个成功,
标题
toastr.success('Have fun storming the castle!','Miracle Max Says')
//
显示 错误 标题
toastr.error('I do not think that word means what you think it means.','Inconceivable!')
//清除当前的列表
toastr.clear()
这个插件 的参数定义说明如下所示。
显示
关闭 按钮
"debug": false,//是否使用debug模式
"positionClass": "toast-top-full-width",//弹出窗的位置
"showDuration": "300",//
显示 的动画时间
"hideDuration": "1000",//消失的动画时间
"timeOut": "5000",//展现时间
"extendedTimeOut": "1000",//加长展示时间
"showEasing": "swing",//
显示 时的动画缓冲方式
"hideEasing": "linear",//消失时的动画缓冲方式
"showMethod": "fadeIn",//
显示 时的动画方式
"hideMethod": "fadeOut" //消失时的动画方式
};
//成功
提示 绑定
$("#success").click(function(){
toastr.success("祝贺你成功了");
})
以上就是我在项目里面，对对话框及提示 框的处理和优化的经验总结，希望对大家学习改进Web界面有帮助。如果大家想了解更多资讯敬请关注编程之家网站！
