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)

转载于:https://www.cnblogs.com/caryfang/p/4536215.html