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

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

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

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

项目是Asp.net Mvc架构的，方便全局调用，我直接在全局 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">&times;</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 modal的样式，不熟悉的朋友可以查查 bootstrap css ，中括号[....]的内容会最终替换为我们传入的参数显示。

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) });
                        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
        }

    }();
});

 

调用方法：

// 四个选项都是可选参数
Modal.alert(
    {
        msg: '内容',
        title: '标题',
        btnok: '确定',
        btncl:'取消'
    });

// 如需增加回调函数，后面直接加 .on( function(e){} );
// 点击“确定” e: true
// 点击“取消” e: false
Modal.confirm(
    {
        msg: "是否删除角色？"
    })
    .on( function (e) {
        alert("返回结果：" + e);
    });

效果图：

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

有空再补全。