1. 程式人生 > 實用技巧 >對Bootstrap一層封裝

對Bootstrap一層封裝

<div id="com-alert" class="modal" style="z-index:9999;display: none;" >
    <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>
$(function () {
        window.Modal = function () {
            var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
            var alr = $("#com-alert");
            var ahtml = alr.html();

            var _tip = function (options, sec) {
                alr.html(ahtml);    // 復原
                alr.find('.ok').hide();
                alr.find('.cancel').hide();
                alr.find('.modal-content').width(500);
                _dialog(options, sec);

                return {
                    on: function (callback) {
                    }
                };
            };

            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 () { return; });
                        }
                    }
                };
            };

            var _dialog = function (options) {
                var ops = {
                    msg: "提示內容",
                    title: "操作提示",
                    btnok: "確定",
                    btncl: "取消"
                };

                $.extend(ops, options);

                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: 250,
                    backdrop: 'static'
                });
            }

            return {
                tip: _tip,
                alert: _alert,
                confirm: _confirm
            }

        }();
    });
    function showTip(msg, sec, callback){
        if(!sec) {
            sec = 1000;
        }
        Modal.tip({
            title:'提示',
            msg: msg
        }, sec);
        setTimeout(callback, sec);
    }

    /**
     * 顯示訊息
     * @param msg
     */
    function showMsg(msg, callback){
        Modal.alert({
            title:'提示',
            msg: msg,
            btnok: '確定'
        }).on(function (e) {
            if(callback){
                callback();
            }
        });
    }

    /**
     * 模態對話方塊
     * @param msg
     * @returns
     */
    function showConfirm(msg,callback){
        //var res = false;
        Modal.confirm(
            {
                title:'提示',
                msg: msg,
            }).on( function (e) {
            callback();
            //res=true;
        });
        //return res;
    }

呼叫:

//提示

showTip("haha", 1000, function() {});


showMsg("haha", function() {});

showConfirm("haha",function(){});

傳統的刪除操作:

var isDel = confirm("真的確定要刪除嗎?");
if (false == isDel) {
return;
}