揭阳网站制作托管,苏州网站建设caiyiduo,wordpress悬浮小人,cms适合做什么网站一、Bootstrap弹出框使用过JQuery UI应该知道#xff0c;它里面有一个dialog的弹出框组件#xff0c;功能也很丰富。与jQuery UI的dialog类似#xff0c;Bootstrap里面也内置了弹出框组件。打开bootstrap 文档可以看到它的dialog是直接嵌入到bootstrap.js和bootstrap.css里面…一、Bootstrap弹出框使用过JQuery UI应该知道它里面有一个dialog的弹出框组件功能也很丰富。与jQuery UI的dialog类似Bootstrap里面也内置了弹出框组件。打开bootstrap 文档可以看到它的dialog是直接嵌入到bootstrap.js和bootstrap.css里面的也就是说只要我们引入了bootstrap的文件就可以直接使用它的dialog组件是不是很方便。本篇我们就结合新增编辑的功能来介绍下bootstrap dialog的使用。废话不多说直接看来它如何使用吧。1、cshtml界面代码 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 div classmodal fade idmyModal tabindex-1 roledialog aria-labelledbymyModalLabel   div classmodal-dialog roledocument    div classmodal-content     div classmodal-header      button typebutton classclose data-dismissmodal aria-labelClosespan aria-hiddentrue×/span/button      h4 classmodal-title idmyModalLabel新增/h4     /div     div classmodal-body      div classform-group       label fortxt_departmentname部门名称/label       input typetext nametxt_departmentname classform-control idtxt_departmentname placeholder部门名称      /div      div classform-group       label fortxt_parentdepartment上级部门/label       input typetext nametxt_parentdepartment classform-control idtxt_parentdepartment placeholder上级部门      /div      div classform-group       label fortxt_departmentlevel部门级别/label       input typetext nametxt_departmentlevel classform-control idtxt_departmentlevel placeholder部门级别      /div      div classform-group       label fortxt_statu描述/label       input typetext nametxt_statu classform-control idtxt_statu placeholder状态      /div     /div     div classmodal-footer      button typebutton classbtn btn-default data-dismissmodalspan classglyphicon glyphicon-remove aria-hiddentrue/span关闭/button      button typebutton idbtn_submit classbtn btn-primary data-dismissmodalspan classglyphicon glyphicon-floppy-disk aria-hiddentrue/span保存/button     /div    /div   /div  /div 最外面的div定义了dialog的隐藏。我们重点来看看第二层的div ? 1 div classmodal-dialog roledocument 这个div定义了dialog对应的class有三种尺寸的弹出框如下 ? 1 2 3 div classmodal-dialog roledocument div classmodal-dialog modal-lg roledocument div classmodal-dialog modal-full roledocument 第一种表示默认类型的弹出框第二种表示增大的弹出框第三种表示满屏的弹出框。roledocument表示弹出框的对象的当前的document。 2、js里面将dialog show出来。默认情况下我们的弹出框是隐藏的只有在用户点击某个操作的时候才会show出来。来看看js里面是如何处理的吧 ? 1 2 3 4 5 //注册新增按钮的事件  $(#btn_add).click(function () {   $(#myModalLabel).text(新增);   $(#myModal).modal();  }); 对你没有看错只需要这一句就能show出这个dialog. ? 1 $(#myModal).modal(); 3、效果展示新增效果 编辑效果 4、说明弹出框显示后点击界面上其他地方以及按Esc键都能隐藏弹出框这样使得用户的操作更加友好。关于dialog里面关闭和保存按钮的事件的初始化在项目里面一般是封装过的这个我们待会来看。 二、确认取消提示框这种类型的提示框一般用于某些需要用户确定才能进行的操作比较常见的如删除操作、提交订单操作等。 1、使用bootstrap弹出框确认取消提示框介绍这个组件之前就得说说组件封装了我们知道像弹出框、确认取消提示框、信息提示框这些东西项目里面肯定是多处都要调用的所以我们肯定是要封装组件的。下面就来看看我们封装的缺乏取消提示框。 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 (function ($) {  window.Ewin function () {   var html div id[Id] classmodal fade roledialog aria-labelledbymodalLabel         div classmodal-dialog modal-sm          div classmodal-content           div classmodal-header            button typebutton classclose data-dismissmodalspan aria-hiddentrue×/spanspan classsr-onlyClose/span/button            h4 classmodal-title idmodalLabel[Title]/h4           /div           div classmodal-body           p[Message]/p           /div           div classmodal-footer   button typebutton classbtn btn-default cancel data-dismissmodal[BtnCancel]/button   button typebutton classbtn btn-primary ok data-dismissmodal[BtnOk]/button  /div          /div         /div        /div;   var dialogdHtml div id[Id] classmodal fade roledialog aria-labelledbymodalLabel         div classmodal-dialog          div classmodal-content           div classmodal-header            button typebutton classclose data-dismissmodalspan aria-hiddentrue×/spanspan classsr-onlyClose/span/button            h4 classmodal-title idmodalLabel[Title]/h4           /div           div classmodal-body           /div          /div         /div        /div;   var reg new RegExp(\\[([^\\[\\]]*?)\\], igm);   var generateId function () {    var date new Date();    return mdl date.valueOf();   }   var init function (options) {    options $.extend({}, {     title: 操作提示,     message: 提示内容,     btnok: 确定,     btncl: 取消,     width: 200,     auto: false    }, options || {});    var modalId generateId();    var content html.replace(reg, function (node, key) {     return {      Id: modalId,      Title: options.title,      Message: options.message,      BtnOk: options.btnok,      BtnCancel: options.btncl     }[key];    });    $(body).append(content);    $(# modalId).modal({     width: options.width,     backdrop: static    });    $(# modalId).on(hide.bs.modal, function (e) {     $(body).find(# modalId).remove();    });    return modalId;   }   return {    alert: function (options) {     if (typeof options string) {      options {       message: options      };     }     var id init(options);     var modal $(# id);     modal.find(.ok).removeClass(btn-success).addClass(btn-primary);     modal.find(.cancel).hide();     return {      id: id,      on: function (callback) {       if (callback callback instanceof Function) {        modal.find(.ok).click(function () { callback(true); });       }      },      hide: function (callback) {       if (callback callback instanceof Function) {        modal.on(hide.bs.modal, function (e) {         callback(e);        });       }      }     };    },    confirm: function (options) {     var id init(options);     var modal $(# id);     modal.find(.ok).removeClass(btn-primary).addClass(btn-success);     modal.find(.cancel).show();     return {      id: id,      on: function (callback) {       if (callback callback instanceof Function) {        modal.find(.ok).click(function () { callback(true); });        modal.find(.cancel).click(function () { callback(false); });       }      },      hide: function (callback) {       if (callback callback instanceof Function) {        modal.on(hide.bs.modal, function (e) {         callback(e);        });       }      }     };    },    dialog: function (options) {     options $.extend({}, {      title: title,      url: ,      width: 800,      height: 550,      onReady: function () { },      onShown: function (e) { }     }, options || {});     var modalId generateId();     var content dialogdHtml.replace(reg, function (node, key) {      return {       Id: modalId,       Title: options.title      }[key];     });     $(body).append(content);     var target $(# modalId);     target.find(.modal-body).load(options.url);     if (options.onReady())      options.onReady.call(target);     target.modal();     target.on(shown.bs.modal, function (e) {      if (options.onReady(e))       options.onReady.call(target, e);     });     target.on(hide.bs.modal, function (e) {      $(body).find(target).remove();     });    }   }  }(); })(jQuery); 不了解组件封装的朋友可以先看看相关文章。这里我们的确认取消提示框主要用到了confirm这个属性对应的方法。还是来看看如何调用吧 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 //注册删除按钮的事件 $(#btn_delete).click(function () {   //取表格的选中行数据   var arrselections $(#tb_departments).bootstrapTable(getSelections);   if (arrselections.length 0) {    toastr.warning(请选择有效数据);    return;   }   Ewin.confirm({ message: 确认要删除选择的数据吗 }).on(function (e) {    if (!e) {     return;    }    $.ajax({     type: post,     url: /api/DepartmentApi/Delete,     data: { : JSON.stringify(arrselections) },     success: function (data, status) {      if (status success) {       toastr.success(提交数据成功);       $(#tb_departments).bootstrapTable(refresh);      }     },     error: function () {      toastr.error(Error);     },     complete: function () {     }    });   });  }); message属性传入提示的信息on里面注入点击按钮后的回调事件。 生成的效果 2、bootbox组件的使用在网上找bootstrap的弹出组件时总是可以看到bootbox这么一个东西确实是一个很简单的组件还是来看看如何使用吧。 当然要使用它必须要添加组件喽。无非也是两种方式引入源码和Nuget。 接下来就是使用它了。首先当然是添加bootbox.js的引用了。然后就是在相应的地方调用了。 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 $(#btn_delete).click(function () {    var arrselections $(#tb_departments).bootstrapTable(getSelections);    if (arrselections.length 0) {     toastr.warning(请选择有效数据);     return;    }    bootbox.alert(确认删除, function () {     var strResult ;    })    bootbox.prompt(确认删除, function (result) {     var strResult result;    })    bootbox.confirm(确认删除, function (result) {     var strResult result;    })        }); 效果展示 更多用法可以参见api。使用起来基本很简单。这个组件最大的特点就是和bootstrap的风格能够很好的保持一致。 3、在网上还找到一个效果比较炫一点的提示框sweetalert   要使用它还是老规矩Nuget。 1文档 2在cshtml页面引入js和css     link href~/Styles/sweetalert.css relstylesheet /    script src~/Scripts/sweetalert.min.js/script3js使用 　　　　 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 swal({    title: 操作提示,  //弹出框的title    text: 确定删除吗, //弹出框里面的提示文本    type: warning,  //弹出框类型    showCancelButton: true, //是否显示取消按钮    confirmButtonColor: #DD6B55,//确定按钮颜色    cancelButtonText: 取消,//取消按钮文本    confirmButtonText: 是的确定删除,//确定按钮上面的文档    closeOnConfirm: true   }, function () {     $.ajax({      type: post,      url: /Home/Delete,      data: { : JSON.stringify(arrselections) },      success: function (data, status) {       if (status success) {        toastr.success(提交数据成功);        $(#tb_departments).bootstrapTable(refresh);       }      },      error: function () {       toastr.error(Error);      },      complete: function () {      }     });   }); 4效果展示 点击确定后进入回调函数 组件很多用哪种园友没可以自行决定不过博主觉得像一些互联网、电子商务类型的网站用sweetalert效果比较合适一般的内部系统可能也用不上。 三、操作完成提示框1、toastr.js组件关于信息提示框博主项目中使用的是toastr.js这么一个组件这个组件最大的好处就是异步、无阻塞提示后可设置消失时间并且可以将消息提示放到界面的各个地方。先来看看效果。 显示在不同位置 top-center位置 bottom-left位置 关于它的使用。 1、引入js和css  ? 1 2 link href~/Content/toastr/toastr.css relstylesheet / script src~/Content/toastr/toastr.min.js/script 2、js初始化 ? 1 2 3 script typetext/javascript   toastr.options.positionClass toast-bottom-right;  /script 将这个属性值设置为不同的值就能让提示信息显示在不同的位置如toast-bottom-right表示下右、toast-bottom-center表示下中、toast-top-center表示上中等更过位置信息请查看文档。 3、使用 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 //初始化编辑按钮 $(#btn_edit).click(function () {    var arrselections $(#tb_departments).bootstrapTable(getSelections);    if (arrselections.length 1) {     toastr.warning(只能选择一行进行编辑);     return;    }    if (arrselections.length 0) {     toastr.warning(请选择有效数据);     return;    }         $(#myModal).modal();   }); 使用起来就如下一句 toastr.warning(只能选择一行进行编辑);是不是很简单~~这里的有四种方法分别对应四种不同颜色的提示框。 toastr.success(提交数据成功);toastr.error(Error);toastr.warning(只能选择一行进行编辑);toastr.info(info);分别对应上图中的四种颜色的提示框。 2、Messenger组件在Bootstrap中文网里面提到了一个alert组件Messenger。 它的使用和toastr.js这个组件基本相似只不过效果有点不太一样。我们还是来看看它是如何使用的。 1效果展示 可以定位到网页的不同位置例如下图中给出的下中位置、上中位置。 提示框的样式有三种状态Success、Error、Info 并且支持四种不同样式的提示框Future、Block、Air、Ice 2组件使用以及代码示例 关于它的使用和toastr大同小异首先引入组件 ? 1 2 3 script src~/Content/HubSpot-messenger-a3df9a6/build/js/messenger.js/script  link href~/Content/HubSpot-messenger-a3df9a6/build/css/messenger.css relstylesheet /  link href~/Content/HubSpot-messenger-a3df9a6/build/css/messenger-theme-future.css relstylesheet / 初始化它的位置 ? 1 2 3 4 5 script typetext/javascript  $._messengerDefaults {   extraClasses: messenger-fixed messenger-theme-future messenger-on-bottom messenger-on-right  } /script 然后js里面使用如下 ? 1 2 3 4 5 6 7 8 9 $(#btn_delete).click(function () {   $.globalMessenger().post({    message: 操作成功,//提示信息    type: info,//消息类型。error、info、success    hideAfter: 2,//多长时间消失    showCloseButton:true,//是否显示关闭按钮    hideOnNavigate: true //是否隐藏导航  }); }); 如果提示框使用默认样式也只有一句就能解决　 ? 1 2 3 4 $.globalMessenger().post({    message: 操作成功,//提示信息    type: info,//消息类型。error、info、success  }); 很简单很强大有木有~~转载于:https://www.cnblogs.com/hofmann/p/6272513.html