bootstrap 重写JS的alert、comfirm函数

原理是使用bootstrap的Modal插件实现。

一、在前端模板合适的地方，加入Modal展现div元素。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<!-- system modal start --> <div id="ycf-alert" class="modal">     <div class="modal-dialog modal-sm">         <div class="modal-content">             <div class="modal-header">                 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>                 <h5 class="modal-title"><i class="fa fa-exclamation-circle"></i> [Title]</h5>             </div>             <div class="modal-body small">                 <p>[Message]</p>             </div>             <div class="modal-footer" >                 <button type="button" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button>                 <button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button>             </div>         </div>     </div> </div> <!-- system modal end -->

二、在前端模板的公共模块，找合适的地方引入bootstrap

1 2 3 4

<link rel="stylesheet" href="__TPL__/css/photoswipe.css">   <script type="text/javascript" src="__PUBLIC__/js/jquery.min.js" ></script> <script src="__PUBLIC__/bootstrap/js/bootstrap.min.js"></script>

三、在JS的comon层，加入重写语句。

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

//封装alert、confirm     window.Modal = function () {         var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');         var alr = $("#ycf-alert");         var ahtml = alr.html();             var _alert = function (options) {             alr.html(ahtml);    // 复原             alr.find('.ok').removeClass('btn-success').addClass('btn-primary');             alr.find('.cancel').hide();             _dialog(options);               return {                 on: function (callback) {                     if (callback && callback instanceof Function) {                         alr.find('.ok').click(function () { callback(true) });                     }                 }             };         };           var _confirm = function (options) {             alr.html(ahtml); // 复原             alr.find('.ok').removeClass('btn-primary').addClass('btn-success');             alr.find('.cancel').show();             _dialog(options);               return {                 on: function (callback) {                     if (callback && callback instanceof Function) {                         alr.find('.ok').click(function () { callback(true) });                         alr.find('.cancel').click(function () { callback(false) });                     }                 }             };         };           var _dialog = function (options) {             var ops = {                 msg: "提示内容",                 title: "操作提示",                 btnok: "确定",                 btncl: "取消"             };               $.extend(ops, options);               //console.log(alr);               var html = alr.html().replace(reg, function (node, key) {                 return {                     Title: ops.title,                     Message: ops.msg,                     BtnOk: ops.btnok,                     BtnCancel: ops.btncl                 }[key];             });               alr.html(html);             alr.modal({                 width: 500,                 backdrop: 'static'             });         }           return {             alert: _alert,             confirm: _confirm         }       }();

四、在需要的地方调用。

1 2 3 4 5 6 7 8

Modal.confirm(     {        msg: "商品已成功加入购物车\n是否去购物车查看？"     })     .on( function (e) {        if(e)             location.href = cart_url;     });

来自为知笔记(Wiz)