BootBox封装

封装： 

(function ($) {
    $.systemBootBox = function (options) {
        var opts = $.extend({}, $.systemBootBox.defaults, options);
        var tokenTime = new Date().getTime();
        $.cookie('hf_token', tokenTime); //设置cookie
        if (opts.boxType == 'alert') {
            bootbox.alert({
                size: opts.size,
                title: opts.title,
                message: opts.message,
                callback: function (data) { opts.boxCallback(data); },
                //buttons: {
                //    OK: {
                //        label: '<i class="fa fa-check"></i> 确定',
                //        className: 'btn-info',   //按钮颜色
                //    }
                //}
            });
        }
        if (opts.boxType == 'confirm') {
            bootbox.confirm({
                size: opts.size,
                message: opts.message,
                buttons: {
                    cancel: {
                        label: '<i class="fa fa-times"></i> 取消',
                        className: 'btn-danger',
                    },
                    confirm: {
                        label: '<i class="fa fa-check"></i> 确定',
                        className: 'btn-info',   //按钮颜色

                    }
                },
                callback: function (data) { opts.boxCallback(data); }
            })
        }
        if (opts.boxType == 'dialog') {
            bootbox.dialog({
                size: opts.size,
                title: opts.title,
                message: '<form id="DataForm">' + opts.message + '<input name="token" type="hidden" value="' + tokenTime + '"/></form>',
                buttons: {
                    cancel: {
                        label: '<i class="fa fa-times"></i> 取消',
                        className: 'btn-danger',
                        callback: function () {
                            // Example.show('Custom cancel clicked');
                        }
                    },
                    confirm: {
                        label: '<i class="fa fa-check"></i> 确定',
                        className: 'btn-info',   //按钮颜色
                        callback: function (data) { opts.boxCallback(data); }
                    }
                }
            });
        }
    }
    $.systemBootBox.defaults = {
        boxType: '',//alert ,confirm,diolog 弹出框 ，警告框，自定义对话框
        size: null, // large ,small
        title: "标题演示",
        message: "标题信息演示",
        onEscape: true,  //Esc 关闭对话框
        show: true,//立即显示对话框
        closeButton: true, //关闭按钮
        boxCallback: function (data) { alert(data); }  //回调函数
    };
})(jQuery);

 调用

1引入boot

2引入bootbox.min.js

3引入封装好js

JS

//添加弹框  自定义
        function openModuleAdd() {
            var titleMsg = "添加新功能";
            $.systemBootBox({
                title: titleMsg,
                boxType: 'dialog',   //自动一对话框
                message: $('#hf_window').html(),  
                boxCallback: function () {   //回调函数
                    var addId = $('tbody').children('tr').length + 1;
                    $('#DataForm input[name="moduleId"]').val(addId);
                    add();
                }
            });
        }

//确认框 

function del(id) {
            $.systemBootBox({
                title: '温馨提示',
                boxType: 'confirm',
                size: 'small',
                message: '确定删除该项吗？',
                boxCallback: function (result) {     //回调函数
                    if (result == true) {
                        var ajaxUrl = '@Url.Action("DelModule", "SeniorManager")';
                        var ajaxData = { 'id': id };
                        postAjax(ajaxUrl, ajaxData);
                    }
                }
            });
        }

《html》

@*弹出框*@
<div id="hf_window" title="操作窗口" class="hide">
    <div class="form-group">
        <div class="col-sm-3 control-label">功能名称：</div>
        <div class="col-sm-7 no-padding-left">
            <input type="text" value="" name="moduleName" id="moduleName" class="form-control input-sm" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-3 control-label">地址：</div>
        <div class="col-sm-7 no-padding-left">
            <input type="text" value="" name="moduleUrl" id="moduleUrl" class="form-control input-sm" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-3 control-label">可自定义：</div>
        <div class="col-sm-7">
            <input type="checkbox" value="是" id="moduleZdy" name="moduleZdy" />
        </div>
    </div>
    <input type="hidden" id="moduleId" value="0" name="moduleId" />
</div>