bootstrap中弹出窗体dialog的自定义

感谢nakupanda的https://github.com/nakupanda/bootstrap3-dialog

根据需要弹出窗体，但是可以移动，不遮挡下面的内容，所以就修改了源代码，添加了一个属性：dataBackdrop，如果为false，则不生成遮罩。同时添加了缩小按钮

var dialogId = 'eventModal';
            var dialog = new BootstrapDialog({
                id: dialogId,
                title: obj.EVENTNAME,
                message: detailHtml,
                draggable: true,
                dataBackdrop: false,
                closeByBackdrop: false,
                closeByKeyboard: false,
                buttons: [
                    {
                        label: '关闭',
                        cssClass: 'btn-link',
                        action: function () {

                        }
                    }
                ]
            });
            dialog.open();

 效果图：

缩小

css代码：

/***************************************************************************
bootstrap dialog样式
***************************************************************************/
.modal-header .minimize {
    margin-top: -2px;
    margin-right: 10px;
}
button.minimize {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
}
.minimize {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}
.minimize:focus, .minimize:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    filter: alpha(opacity=50);
    opacity: .5;
}
/*bootstrap弹出框样式*/
.bootstrap-dialog {
}

.bootstrap-dialog .modal-header {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.bootstrap-dialog .bootstrap-dialog-title {
    color: #fff;
    display: inline-block;
    font-size: 16px;
}

.bootstrap-dialog .bootstrap-dialog-message {
    font-size: 14px;
}

.bootstrap-dialog .bootstrap-dialog-button-icon {
    margin-right: 3px;
}

.bootstrap-dialog .bootstrap-dialog-close-button {
    font-size: 20px;
    float: right;
    filter: alpha(opacity=90);
    -moz-opacity: 0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
}

.bootstrap-dialog .bootstrap-dialog-close-button:hover {
    cursor: pointer;
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}
.bootstrap-dialog .bootstrap-dialog-minimize-button {
    font-size: 20px;
    float: right;
    filter: alpha(opacity=90);
    -moz-opacity: 0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
}
.bootstrap-dialog .bootstrap-dialog-minimize-button:hover {
    cursor: pointer;
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}
.bootstrap-dialog.type-default .modal-header {
    background-color: #fff;
}

.bootstrap-dialog.type-default .bootstrap-dialog-title {
    color: #333;
}

.bootstrap-dialog.type-info .modal-header {
    background-color: #5bc0de;
}

.bootstrap-dialog.type-primary .modal-header {
    background-color: #428bca;
}

.bootstrap-dialog.type-success .modal-header {
    background-color: #5cb85c;
}

.bootstrap-dialog.type-warning .modal-header {
    background-color: #f0ad4e;
}

.bootstrap-dialog.type-danger .modal-header {
    background-color: #d9534f;
}

.bootstrap-dialog.size-large .bootstrap-dialog-title {
    font-size: 24px;
}

.bootstrap-dialog.size-large .bootstrap-dialog-close-button {
    font-size: 30px;
}

.bootstrap-dialog.size-large .bootstrap-dialog-message {
    font-size: 18px;
}

.bootstrap-dialog .icon-spin {
    display: inline-block;
    -moz-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
}

@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(359deg);
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
    }
}

@-o-keyframes spin {
    0% {
        -o-transform: rotate(0deg);
    }
    100% {
        -o-transform: rotate(359deg);
    }
}

@-ms-keyframes spin {
    0% {
        -ms-transform: rotate(0deg);
    }
    100% {
        -ms-transform: rotate(359deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}
 
.modal {
    bottom: auto;
    display: none;
    left: 380px;
    outline: 0 none;
    overflow: hidden;
    position: fixed;
    right: auto;
    top: 50px;
    z-index: 1050;
    width: auto;
    height: auto;
}

 js代码：

/* global define */

/* ================================================
 * Make use of Bootstrap's modal more monkey-friendly.
 *
 * For Bootstrap 3.
 *
 * javanoob@hotmail.com
 *
 * https://github.com/nakupanda/bootstrap3-dialog
 *
 * Licensed under The MIT License.
 * ================================================ */
(function (root, factory) {

    "use strict";

    // CommonJS module is defined
    if (typeof module !== 'undefined' && module.exports) {
        module.exports = factory(require('jquery'), require('bootstrap'));
    }
    // AMD module is defined
    else if (typeof define === "function" && define.amd) {
        define("bootstrap-dialog", ["jquery", "bootstrap"], function ($) {
            return factory($);
        });
    } else {
        // planted over the root!
    root.BootstrapDialog = factory(root.jQuery);
    }

}(this, function ($) {

    "use strict";

    /* ================================================
     * Definition of BootstrapDialogModal.
     * Extend Bootstrap Modal and override some functions.
     * BootstrapDialogModal === Modified Modal.
     * ================================================ */
    var Modal = $.fn.modal.Constructor;
    var BootstrapDialogModal = function (element, options) {
        Modal.call(this, element, options);
    };
    BootstrapDialogModal.getModalVersion = function () {
        var version = null;
        if (typeof $.fn.modal.Constructor.VERSION === 'undefined') {
            version = 'v3.1';
        } else if (/3\.2\.\d+/.test($.fn.modal.Constructor.VERSION)) {
            version = 'v3.2';
        } else if (/3\.3\.[1,2]/.test($.fn.modal.Constructor.VERSION)) {
            version = 'v3.3';  // v3.3.1, v3.3.2
        } else {
            version = 'v3.3.4';
        }

        return version;
    };
    BootstrapDialogModal.ORIGINAL_BODY_PADDING = parseInt(($('body').css('padding-right') || 0), 10);
    BootstrapDialogModal.METHODS_TO_OVERRIDE = {};
    BootstrapDialogModal.METHODS_TO_OVERRIDE['v3.1'] = {};
    BootstrapDialogModal.METHODS_TO_OVERRIDE['v3.2'] = {
        hide: function (e) {
            if (e) {
                e.preventDefault();
            }
            e = $.Event('hide.bs.modal');

            this.$element.trigger(e);

            if (!this.isShown || e.isDefaultPrevented()) {
                return;
            }

            this.isShown = false;

            // Remove css class 'modal-open' when the last opened dialog is closing.
            var openedDialogs = this.getGlobalOpenedDialogs();
            if (openedDialogs.length === 0) {
                this.$body.removeClass('modal-open');
            }

            this.resetScrollbar();
            this.escape();

            $(document).off('focusin.bs.modal');

            this.$element
                .removeClass('in')
                .attr('aria-hidden', true)
                .off('click.dismiss.bs.modal');

            $.support.transition && this.$element.hasClass('fade') ?
                this.$element
                    .one('bsTransitionEnd', $.proxy(this.hideModal, this))
                    .emulateTransitionEnd(300) :
                this.hideModal();
        }
    };
    BootstrapDialogModal.METHODS_TO_OVERRIDE['v3.3'] = {
        /**
         * Overrided.
         *
         * @returns {undefined}
         */
        setScrollbar: function () {
            var bodyPad = BootstrapDialogModal.ORIGINAL_BODY_PADDING;
            if (this.bodyIsOverflowing) {
                this.$body.css('padding-right', bodyPad + this.scrollbarWidth);
            }
        },
        /**
         * Overrided.
         *
         * @returns {undefined}
         */
        resetScrollbar: function () {
            var openedDialogs = this.getGlobalOpenedDialogs();
            if (openedDialogs.length === 0) {
                this.$body.css('padding-right', BootstrapDialogModal.ORIGINAL_BODY_PADDING);
            }
        },
        /**
         * Overrided.
         *
         * @returns {undefined}
         */
        hideModal: function () {
            this.$element.hide();
            this.backdrop($.proxy(function () {
                var openedDialogs = this.getGlobalOpenedDialogs();
                if (openedDialogs.length === 0) {
                    this.$body.removeClass('modal-open');
                }
                this.resetAdjustments();
                this.resetScrollbar();
                this.$element.trigger('hidden.bs.modal');
            }, this));
        }
    };
    BootstrapDialogModal.METHODS_TO_OVERRIDE['v3.3.4'] = $.extend({}, BootstrapDialogModal.METHODS_TO_OVERRIDE['v3.3']);
    BootstrapDialogModal.prototype = {
        constructor: BootstrapDialogModal,
        /**
         * New function, to get the dialogs that opened by BootstrapDialog.
         *