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

来源：互联网发布：淘宝客服总结报告编辑：程序博客网时间：2024/05/21 22:36

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

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

无码无真相，少说多做，上代码。直接在全局 Layout 页面加上以下HTML：

<!-- 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 -->

js 封装如下：

$(function () {        window.Modal = function () {            var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');            var alr = $("#ycf-alert");            var ahtml = alr.html();    //关闭时恢复 modal html 原样，供下次调用时 replace 用    //var _init = function () {    //  alr.on("hidden.bs.modal", function (e) {    //      $(this).html(ahtml);    //  });    //}();    /* html 复原不在 _init() 里面做了，重复调用时会有问题，直接在 _alert/_confirm 里面做 */    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) });            }        }      };  };  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  }}();});

调用方法：

function userDel(id){    Modal.confirm(    {        msg: "是否删除角色？"    })    .on( function (e) {        $.ajax({            url:"__CONTROLLER__/userDel",            type:"post",            data:"id=" + id,            dataType:"JSON" ,            success:function(res){                Modal.alert(                {                    msg: res['msg'],                    title: '操作',                    btnok: '确定',                    btncl:'取消'                });                if(res['status']=='success'){                    $('#' + id).remove();                }            }        })    });}

0 0