http://www.cnblogs.com/wuhuacong/p/4775282.html

在各种Web开发过程中，对话框和提示框的处理是很常见的一种界面处理技术，用得好，可以给用户很好的页面体验，Bootstrap开发也一样，我们往往在页面新增、编辑、查看详细等界面使用弹出对话框层的方式进行显示数据，删除则可能使用一个提示确认框，如果操作成功，我们可以使用更丰富的提示框来处理，本篇主要对比说明在Bootstrap开发中用到的这些技术要点。

1、Bootstrap对话框的使用

常规的Bootstrap有几种尺寸的对话框，包括默认状态的小对话框，中等宽度的对话框，和全尺寸的对话框几种，Bootstrap的对话框界面非常友好， 当我们使用ESC键或者鼠标单击其他空白处，则会自动隐藏对话框的。

它们的定义只是class不同，如下面是默认的小对话框界面代码：

  1. <!--------------------------添加/修改信息的弹出层---------------------------->
  2. <div id="add" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  3.     <div class="modal-dialog">
  4.         <div class="modal-content">
  5.             <div class="modal-header bg-primary">
  6.                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
  7.                 <h4 class="modal-title">
  8.                     <i class="icon-pencil"></i>
  9.                     <span id="lblAddTitle" style="font-weight:bold">添加信息</span>
  10.                 </h4>
  11.             </div>
  12.             <form class="form-horizontal form-bordered form-row-strippe" id="ffAdd" action="" data-toggle="validator" enctype="multipart/form-data">
  13.                 <div class="modal-body">
  14.                     <div class="row">
  15.                         <div class="col-md-12">
  16.                             <div class="form-group">
  17.                                 <label class="control-label col-md-2">父ID</label>
  18.                                 <div class="col-md-10">
  19.                                     <select id="PID" name="PID" type="text" class="form-control select2" placeholder="父ID..." ></select>
  20.                                 </div>
  21.                             </div>
  22.                         </div>
  23.                         <div class="col-md-12">
  24.                             <div class="form-group">
  25.                                 <label class="control-label col-md-2">名称</label>
  26.                                 <div class="col-md-10">
  27.                                     <input id="Name" name="Name" type="text" class="form-control" placeholder="名称..." />
  28.                                 </div>
  29.                             </div>
  30.                         </div>
  31.                         <div class="col-md-12">
  32.                             <div class="form-group">
  33.                                 <label class="control-label col-md-2">备注</label>
  34.                                 <div class="col-md-10">
  35.                                     <textarea id="Note" name="Note" class="form-control" placeholder="备注..."></textarea>
  36.                                 </div>
  37.                             </div>
  38.                         </div>
  39.  
  40.                     </div>
  41.                 </div>
  42.                 <div class="modal-footer bg-info">
  43.                     <input type="hidden" id="ID" name="ID" />
  44.                     <button type="submit" class="btn blue">确定</button>
  45.                     <button type="button" class="btn green" data-dismiss="modal">取消</button>
  46.                 </div>
  47.             </form>
  48.         </div>
  49.     </div>
  50. </div>

大概的界面如下所示：

注意上面代码里面的对话框样式代码，如下：

  1. <div class="modal-dialog">

如果是其他两个尺寸的数据库，也只需要修改这里即可，如下所示两种代码分别是：

  1.     <div class="modal-dialog modal-lg">

以及

  1.     <div class="modal-dialog modal-full">

我们可以根据界面元素的布局，来决定采用哪个尺寸的对话框层定义，不过他们这几个对话框的调用方式是一致的。

打开对话框界面如下所示：

  1. //显示可以选择客户
  2. $("#btnSelectCustomer").show();

关闭对话框界面如下所示:

  1. $("#add").modal("hide");

一般情况下，我们弹出的对话框就是一个表单，可以执行类似保存数据的提交操作的，因此需要对表单的数据进行验证，如果有错误，我们可能需要在界面上提醒，因此在页面初始化的时候，需要初始化表单的验证规则，下面是我们常规的表单初始化操作。

  1.         //绑定相关事件
  2.         function BindEvent() {
  3.             //判断表单的信息是否通过验证
  4.             $("#ffAdd").validate({
  5.                 meta: "validate",
  6.                 errorElement: 'span',
  7.                 errorClass: 'help-block help-block-error',
  8.                 focusInvalid: false,
  9.                 highlight: function (element) {
  10.                     $(element).closest('.form-group').addClass('has-error');
  11.                 },
  12.                 success: function (label) {
  13.                     label.closest('.form-group').removeClass('has-error');
  14.                     label.remove();
  15.                 },
  16.                 errorPlacement: function (error, element) {
  17.                     element.parent('div').append(error);
  18.                 },
  19.                 submitHandler: function (form) {
  20.                     $("#add").modal("hide");
  21.                     //构造参数发送给后台
  22.                     var postData = $("#ffAdd").serializeArray();
  23.                     $.post(url, postData, function (json) {
  24.                         var data = $.parseJSON(json);
  25.                         if (data.Success) {
  26.                             //增加肖像的上传处理
  27.                             $('#file-Portrait').fileinput('upload');
  28.  
  29.                             //保存成功  1.关闭弹出层，2.刷新表格数据
  30.                             showTips("保存成功");
  31.                             Refresh();
  32.                         }
  33.                         else {
  34.                             showError("保存失败:" + data.ErrorMessage, 3000);
  35.                         }
  36.                     }).error(function () {
  37.                         showTips("您未被授权使用该功能，请联系管理员进行处理。");
  38.                     });
  39.                 }
  40.             });
  41.         }

但是一般这些代码都会重复很多，因此我们可以封装函数的方式，重用部分代码，从而使用更简洁的处理代码，但同样能达到目的。

  1.         //绑定相关事件
  2.         function BindEvent() {
  3.             //添加、编辑记录的窗体处理
  4.             formValidate("ffAdd", function (form) {
  5.                 $("#add").modal("hide");
  6.                 //构造参数发送给后台
  7.                 var postData = $("#ffAdd").serializeArray();
  8.                 $.post(url, postData, function (json) {
  9.                     var data = $.parseJSON(json);
  10.                     if (data.Success) {
  11.                         //保存成功  1.关闭弹出层，2.刷新表格数据
  12.                         showTips("保存成功");
  13.                         Refresh();
  14.                     }
  15.                     else {
  16.                         showError("保存失败:" + data.ErrorMessage, 3000);
  17.                     }
  18.                 }).error(function () {
  19.                     showTips("您未被授权使用该功能，请联系管理员进行处理。");
  20.                 });
  21.             });
  22.         }

2、删除确认的对话框处理

1）bootbox插件的使用

除了上面的常规对话框，我们还经常碰到一种简洁的确认对话框，虽然也可以使用上面的代码来构建一个确认对话框，不过一般情况下不需要这么麻烦的，可以使用插件bootbox的确认对话框来进行处理。

Bootbox.js是一个小的JavaScript库，它帮助您在使用bootstrap框架的时候快速的创建一个对话框，也可以帮您创建，管理或删除任何所需的DOM元素或js事件处理程序。

bootbox.js使用三方法设计模仿他们的本地JavaScript一些方法。他们确切的方法签名是灵活的每个可以采取各种参数定制标签和指定缺省值，但它们通常被称为一样：

  • bootbox.alert(message, callback)
  • bootbox.prompt(message, callback)
  • bootbox.confirm(message, callback)

唯一需要的参数是alert是 message; callback是必需的 confirm 和 prompt 调用以确定用户的响应。甚至当调用警报回调是确定当用户 驳回对话框由于我们的包装方法不能不要块 像他们的母语是有用的：他们是异步而非同步。

这三种方法调用四分之一个公共方法，你也可以使用你自己的自定义对话框创建 ：

  1. bootbox.dialog(options)

更多api帮助文档请参见：http://bootboxjs.com/documentation.html

Alert

  1. bootbox.alert("Hello world!", function() {
  2. Example.show("Hello world callback");
  3. });

Confirm

  1. bootbox.confirm("Are you sure?", function(result) {
  2. Example.show("Confirm result: "+result);
  3. });
    或者代码
  1.                 bootbox.confirm("您确认删除选定的记录吗？", function (result) {
  2.                    if (result) {
  3.                        //最后去掉最后的逗号,
  4.                        ids = ids.substring(0, ids.length - 1);
  5.  
  6.                        //然后发送异步请求的信息到后台删除数据
  7.                        var postData = { Ids: ids };
  8.                        $.get("/Province/DeletebyIds", postData, function (json) {
  9.                            var data = $.parseJSON(json);
  10.                            if (data.Success) {
  11.                                showTips("删除选定的记录成功");
  12.                                Refresh();//刷新页面数据
  13.                            }
  14.                            else {
  15.                                showTips(data.ErrorMessage);
  16.                            }
  17.                        });
  18.                    }
  19.                 });

Prompt

  1. bootbox.prompt("What is your name?", function(result) {
  2. if (result === null) {
  3.    Example.show("Prompt dismissed");
  4. } else {
  5.    Example.show("Hi <b>"+result+"</b>");
  6. }
  7. });

Custom Dialog

使用代码和界面效果如下所示：

  1. bootbox.dialog(…)

2）sweetalert插件的使用

虽然上面的效果非常符合Bootstrap的风格，不过界面略显单调。上面的效果不是我很喜欢这种风格，我遇到一个看起来更加美观的效果，如下所示。

这个效果是引入插件sweetalert（http://t4t5.github.io/sweetalert/）实现的。

  1.     swal({
  2.         title: "操作提示",
  3.         text: newtips,
  4.         type: "warning", showCancelButton: true,
  5.         confirmButtonColor: "#DD6B55",
  6.         cancelButtonText: "取消",
  7.         confirmButtonText: "是的，执行删除！",
  8.         closeOnConfirm: true
  9.     }, function () {
  10.         delFunction();
  11.     });

上面的界面效果类似的实现代码如下所示：

一般它的弹出框代码可以做的很简单，如下所示。

3、信息提示框的处理

上面两种处理，都是利用弹出对话框进行实现的，而且对界面有阻塞的，一般情况下，我们做信息提示效果，希望它不要影响我们进一步的操作，或者至少提供一个很短的自动消失效果。

那么这里我们就来介绍下jNotify插件和toastr插件了。

1）jNotify提示框的使用

jNotify提示框，一款优秀的jQuery结果提示框插件。我们在提交表单后，通过Ajax响应后台返回结果，并在前台显示返回信息，jNotify能非常优雅的显示操作结果信息。jNotify是一款基于jQuery的信息提示插件，它支持操作成功、操作失败和操作提醒三种信息提示方式。jNotify浏览器兼容性非常好，支持更改提示内容，支持定位提示框的位置，可配置插件参数。

  1. jSuccess(message,{option});
  2.  
  3. jError("操作失败，请重试!!");
  4.  
  5. jNotify("注意：请完善你的<strong>个人资料！</strong>");

jNotify的参数详细配置：

  1. autoHide : true,                // 是否自动隐藏提示条
  2. clickOverlay : false,            // 是否单击遮罩层才关闭提示条
  3. MinWidth : 200,                    // 最小宽度
  4. TimeShown : 1500,                 // 显示时间：毫秒
  5. ShowTimeEffect : 200,             // 显示到页面上所需时间：毫秒
  6. HideTimeEffect : 200,             // 从页面上消失所需时间：毫秒
  7. LongTrip : 15,                    // 当提示条显示和隐藏时的位移
  8. HorizontalPosition : "right",     // 水平位置:left, center, right
  9. VerticalPosition : "bottom",     // 垂直位置：top, center, bottom
  10. ShowOverlay : true,                // 是否显示遮罩层
  11. ColorOverlay : "#000",            // 设置遮罩层的颜色
  12. OpacityOverlay : 0.3,            // 设置遮罩层的透明度
  13. onClosed:fn            //关闭提示框后执行函数，可以再次调用其他jNotify。如上面的三个依次调用。

下面是我在脚本类里面封装的饿公用方法，用来实现提示效果的显示的。

  1. //显示错误或提示信息（需要引用jNotify相关文件）
  2. function showError(tips, TimeShown, autoHide) {
  3.     jError(
  4.       tips,
  5.       {
  6.           autoHide: autoHide || true, // added in v2.0
  7.           TimeShown: TimeShown || 1500,
  8.           HorizontalPosition: 'center',
  9.           VerticalPosition: 'top',
  10.           ShowOverlay: true,
  11.           ColorOverlay: '#000',
  12.           onCompleted: function () { // added in v2.0
  13.               //alert('jNofity is completed !');
  14.           }
  15.       }
  16.     );
  17. }
  18.  
  19. //显示提示信息
  20. function showTips(tips, TimeShown, autoHide) {
  21.     jSuccess(
  22.       tips,
  23.       {
  24.           autoHide: autoHide || true, // added in v2.0
  25.           TimeShown: TimeShown || 1500,
  26.           HorizontalPosition: 'center',
  27.           VerticalPosition: 'top',
  28.           ShowOverlay: true,
  29.           ColorOverlay: '#000',
  30.           onCompleted: function () { // added in v2.0
  31.               //alert('jNofity is completed !');
  32.           }
  33.       }
  34.     );
  35. }

这样我们在使用Ajax的POST方法的时候，我们可以根据不同的需要进行提示。

  1.                     var postData = $("#ffAdd").serializeArray();
  2.                     $.post(url, postData, function (json) {
  3.                         var data = $.parseJSON(json);
  4.                         if (data.Success) {
  5.                             //增加肖像的上传处理
  6.                             $('#file-Portrait').fileinput('upload');
  7.  
  8.                             //保存成功  1.关闭弹出层，2.刷新表格数据
  9.                             showTips("保存成功");
  10.                             Refresh();
  11.                         }
  12.                         else {
  13.                             showError("保存失败:" + data.ErrorMessage, 3000);
  14.                         }
  15.                     }).error(function () {
  16.                         showTips("您未被授权使用该功能，请联系管理员进行处理。");
  17.                     });

2）toastr插件的使用 

toastr 是一个Javascript库用于创建Gnome/Growl风格，非阻塞的页面消息提醒。，toastr可设定四种通知模式：成功，出错，警告，提示，而提示窗口的位置，动画效果都可以通过能数来设置，在官方站可以通过勾选参数来生成JS，非常的方便使用。

插件地址是：http://codeseven.github.io/toastr/

它可以分别创建如下几种效果：警告、危险、成功、提示的对话框信息，效果如下所示。

它的使用JS代码如下所示。

  1. //显示一个警告,没有标题
  2. toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!')
  3.  
  4. //显示一个成功,标题
  5. toastr.success('Have fun storming the castle!', 'Miracle Max Says')
  6.  
  7. //显示错误标题
  8. toastr.error('I do not think that word means what you think it means.', 'Inconceivable!')
  9.  
  10. //清除当前的列表
  11. toastr.clear()

这个插件的参数定义说明如下所示。

  1.     //参数设置，若用默认值可以省略以下面代
  2.     toastr.options = {
  3.         "closeButton": false, //是否显示关闭按钮
  4.         "debug": false, //是否使用debug模式
  5.         "positionClass": "toast-top-full-width",//弹出窗的位置
  6.         "showDuration": "300",//显示的动画时间
  7.         "hideDuration": "1000",//消失的动画时间
  8.         "timeOut": "5000", //展现时间
  9.         "extendedTimeOut": "1000",//加长展示时间
  10.         "showEasing": "swing",//显示时的动画缓冲方式
  11.         "hideEasing": "linear",//消失时的动画缓冲方式
  12.         "showMethod": "fadeIn",//显示时的动画方式
  13.         "hideMethod": "fadeOut" //消失时的动画方式
  14.         };
  15.  
  16.         //成功提示绑定
  17.         $("#success").click(function(){
  18.         toastr.success("祝贺你成功了");
  19.         })

以上就是我在项目里面，对对话框及提示框的处理和优化的经验总结，希望对大家学习改进Web界面有帮助。

（转）基于Metronic的Bootstrap开发框架经验总结（6）--对话框及提示框的处理和优化的更多相关文章

  1. 基于Metronic的Bootstrap开发框架经验总结（14）--条码和二维码的生成及打印处理

    在很多项目里面,对条形码和二维码的生成和打印也是一种很常见的操作,在Web项目里面,我们可以利用JS生成条形码和二维码的组件有很多.本文引入两个比较广泛使用的JS组件,用来处理条形码和二维码的生成处理 ...

  2. 基于Metronic的Bootstrap开发框架经验总结（13）--页面链接收藏夹功能的实现2（利用Sortable进行拖动排序）

    在上篇随笔<基于Metronic的Bootstrap开发框架经验总结(12)--页面链接收藏夹功能的实现>上,我介绍了链接收藏夹功能的实现,以及对收藏记录的排序处理.该篇随笔主要使用功能按 ...

  3. 基于Metronic的Bootstrap开发框架经验总结（5）--Bootstrap文件上传插件File Input的使用

    Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...

  4. 基于Metronic的Bootstrap开发框架经验总结（11）--页面菜单的几种呈现方式

    在常规的后台管理系统或者前端界面中,一般都有一个导航菜单提供给用户,方便选择所需的内容.基于Metronic的Bootstrap开发框架,是整合了Metroinc样式,以及Boostrap组件模块的内 ...

  5. 基于Metronic的Bootstrap开发框架经验总结（10）--优化Bootstrap图标管理

    在基于Bootstrap开发的项目中,鲜艳颜色的按钮,以及丰富的图表是很吸引人的特点,为了将这个特点发挥到极致,可以利用Bootstrap图标抽取到数据库里面,并在界面中进行管理和使用,这样我们可以把 ...

  6. 基于Metronic的Bootstrap开发框架经验总结（1）-框架总览及菜单模块的处理

    最近一直很多事情,博客停下来好久没写了,整理下思路,把最近研究的基于Metronic的Bootstrap开发框架进行经验的总结出来和大家分享下,同时也记录自己对Bootstrap开发的学习研究的点点滴 ...

  7. 基于Metronic的Bootstrap开发框架经验总结（2）--列表分页处理和插件JSTree的使用

    在上篇<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理>介绍了Bootstrap开发框架的一些基础性概括,包括总体界面效果,以及布局.菜单等内容, ...

  8. 基于Metronic的Bootstrap开发框架经验总结（3）--下拉列表Select2插件的使用

    在上篇<基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用>介绍了数据的分页处理,使用了Bootstrap Paginator插件,另外 ...

  9. 基于Metronic的Bootstrap开发框架经验总结（4）--Bootstrap图标的提取和利用

    在前面的一篇随笔<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理>介绍了菜单模块的处理,主要介绍如何动态从数据库里面获取记录并构建菜单列表.其中菜 ...

  10. 基于Metronic的Bootstrap开发框架经验总结（6）--对话框及提示框的处理和优化

    在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增.编辑.查看详细等界面使用弹出对话框层的方式进 ...

随机推荐

  1. qwb和李主席

    qwb和李主席 Time Limit: 4 Sec  Memory Limit: 128 MB Description qwb和李主席打算平分一堆宝藏,他们想确保分配公平,可惜他们都太懒了,你能帮助他 ...

  2. nyoj_38_布线问题_201403121753

    布线问题 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 南阳理工学院要进行用电线路改造,现在校长要求设计师设计出一种布线方式,该布线方式需要满足以下条件:1.把所有 ...

  3. POJ 3233 Matrix Power Series 二分+矩阵乘法

    链接:http://poj.org/problem?id=3233 题意:给一个N*N的矩阵(N<=30),求S = A + A^2 + A^3 + - + A^k(k<=10^9). 思 ...

  4. Android+Jquery Mobile学习系列(2)-HTML5/Jquery Mobile基础

    本章介绍两个关键字[HTML5]和[Jquery Mobile],简单说这两者的关系是:HTML5作为主体,Jquery Mobile在HTML5的基础上对其进行了优化.装饰. HTML5 HTML5 ...

  5. Java获取路径中的文件名（正则表达式）

    Java获取路径中的文件名(正则表达式) 目标 在这个路径中我想得到model2 /E:/2017-02-21--SoftWare/github/test/Java/poiDemo_word2exce ...

  6. Java之POI读取Excel的Package should contain a content type part [M1.13]] with root cause异常问题解决

    Java之POI读取Excel的Package should contain a content type part [M1.13]] with root cause异常问题解决 引言: 在Java中 ...

  7. C# 手动编写 DataSet，DataTable 及遍历DataSet中的数据

    一.手动编写DataSet:    有时候不想从数据库导出 DataSet,或者有其他的需要,要将数据库里的DataSet包装成另一个样子,这个时候,了解DataSet的内部结构就非常必要.DataS ...

  8. ningbooj--1655--木块拼接（贪心）

     [1655] 木块拼接 时间限制: 1000 ms 内存限制: 65535 K 问题描述 好奇的skyv95想要做一个正方形的木块,现在有三种颜色的矩形木块,颜色分别为"A" ...

  9. 洛谷 P3128 [ USACO15DEC ] 最大流Max Flow —— 树上差分

    题目:https://www.luogu.org/problemnew/show/P3128 倍增求 lca 也写错了活该第一次惨WA. 代码如下: #include<iostream> ...

  10. 第2章 安装Nodejs 2-4 Linux下安装Nodejs

    linux下编译安装Nodejs  GCC和G++分别是GNU的C和C++编译器.它们在执行编译工作的时候把源代码通过预处理转化成汇编语言生成.i后缀的文件,再由汇编变成目标机器代码,最后连接目标代码 ...