jquery 重写 bootstrap 样式 alert/confirm 消息窗口

admin

相信很多人都受够了 alert、confirm 的样子，最近正在用 bootstrap 做项目，顺便封装了一个 bootstrap 样式的消息框。

实现起来很简单，bootstrap 本身就自带了 modal 模态框，样子还不错 ：）就把它封装一下用吧。

无码无真相，少说多做，上代码。


项目是Asp.net Mvc架构的，方便全局调用，我直接在全局 Layout 页面加上以下HTML：

1. <!-- system modal start -->
   
2.     <div id="ycf-alert" class="modal">
   
3.       <div class="modal-dialog modal-sm">
   
4.         <div class="modal-content">
   
5.           <div class="modal-header">
   
6.             <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
   
7.             <h5 class="modal-title"><i class="fa fa-exclamation-circle"></i> [Title]</h5>
   
8.           </div>
   
9.           <div class="modal-body small">
   
10.             <p>[Message]</p>
    
11.           </div>
    
12.           <div class="modal-footer" >
    
13.             <button type="button" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button>
    
14.             <button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button>
    
15.           </div>
    
16.         </div>
    
17.       </div>
    
18.     </div>
    
19.   <!-- system modal end -->

复制代码

不多说了，都是bootstrap modal的样式，不熟悉的朋友可以查查 bootstrap css ，中括号[....]的内容会最终替换为我们传入的参数显示。

js 封装如下：

1. $(function () {
   
2.   window.Modal = function () {
   
3.     var reg = new RegExp("\[([^\[\]]*?)\]", 'igm');
   
4.     var alr = $("#ycf-alert");
   
5.     var ahtml = alr.html();
   
6. 
   
7.     //关闭时恢复 modal html 原样，供下次调用时 replace 用
   
8.     //var _init = function () {
   
9.     //        alr.on("hidden.bs.modal", function (e) {
   
10.     //                $(this).html(ahtml);
    
11.     //        });
    
12.     //}();
    
13. 
    
14.     /* html 复原不在 _init() 里面做了，重复调用时会有问题，直接在 _alert/_confirm 里面做 */
    
15. 
    
16. 
    
17.     var _alert = function (options) {
    
18.       alr.html(ahtml);        // 复原
    
19.       alr.find('.ok').removeClass('btn-success').addClass('btn-primary');
    
20.       alr.find('.cancel').hide();
    
21.       _dialog(options);
    
22. 
    
23.       return {
    
24.         on: function (callback) {
    
25.           if (callback && callback instanceof Function) {
    
26.             alr.find('.ok').click(function () { callback(true) });
    
27.           }
    
28.         }
    
29.       };
    
30.     };
    
31. 
    
32.     var _confirm = function (options) {
    
33.       alr.html(ahtml); // 复原
    
34.       alr.find('.ok').removeClass('btn-primary').addClass('btn-success');
    
35.       alr.find('.cancel').show();
    
36.       _dialog(options);
    
37. 
    
38.       return {
    
39.         on: function (callback) {
    
40.           if (callback && callback instanceof Function) {
    
41.             alr.find('.ok').click(function () { callback(true) });
    
42.             alr.find('.cancel').click(function () { callback(false) });
    
43.           }
    
44.         }
    
45.       };
    
46.     };
    
47. 
    
48.     var _dialog = function (options) {
    
49.       var ops = {
    
50.         msg: "提示内容",
    
51.         title: "操作提示",
    
52.         btnok: "确定",
    
53.         btncl: "取消"
    
54.       };
    
55. 
    
56.       $.extend(ops, options);
    
57. 
    
58.       console.log(alr);
    
59. 
    
60.       var html = alr.html().replace(reg, function (node, key) {
    
61.         return {
    
62.           Title: ops.title,
    
63.           Message: ops.msg,
    
64.           BtnOk: ops.btnok,
    
65.           BtnCancel: ops.btncl
    
66.         }[key];
    
67.       });
    
68.       
    
69.       alr.html(html);
    
70.       alr.modal({
    
71.         width: 500,
    
72.         backdrop: 'static'
    
73.       });
    
74.     }
    
75. 
    
76.     return {
    
77.       alert: _alert,
    
78.       confirm: _confirm
    
79.     }
    
80. 
    
81.   }();
    
82. });

复制代码

1. // 四个选项都是可选参数
   
2. Modal.alert(
   
3.   {
   
4.     msg: '内容',
   
5.     title: '标题',
   
6.     btnok: '确定',
   
7.     btncl:'取消'
   
8.   });
   
9. 
   
10. // 如需增加回调函数，后面直接加 .on( function(e){} );
    
11. // 点击“确定” e: true
    
12. // 点击“取消” e: false
    
13. Modal.confirm(
    
14.   {
    
15.     msg: "是否删除角色？"
    
16.   })
    
17.   .on( function (e) {
    
18.     alert("返回结果：" + e);
    
19.   });

复制代码

效果图：

还有一些细节需要完善，譬如blockUI等，晚了，先睡。

有空再补全。

原文链接：http://www.tuicool.com/articles/mMNrIr