bootstrap-Modal组件封装

bootstrap-Modal组件封装：

(function() {
    $.extend({
        xmDialog: {
        init: function(option) {
            var that = this;
            var base = {
                el: '#xmCustomModal',
                classes: option.classes || 'modal-sm',
                zIndex:option.zIndex||10000,
                styles: option.styles || {},//临时没用到
                modalHeader: {
                    title: option.title || '',
                    styles: option.headerStyles||{}
                },
                modalBody: {
                    content: option.content || '',
                    styles: option.bodyStyles || {},
                    loading: '<div id="spinLoading" class="bg-white w-100 h-100 position-absolute row align-items-center justify-content-center m-0 spin-loading" style="top:0;left:0;"><div class="loader"><div class="loader-inner line-spin-fade-loader"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div></div>',
                &#125;,
                modalFooter: &#123;
                    show: typeof option.showFooter === 'boolean' ? option.showFooter : true,
                    styles: &#123;
                        'justify-content': option.footerAlign||'center'
                    &#125;,
                    type: option.type || 'confirm',
                    buttons: &#123;
                        'confirm': [&#123;
                            type: 'ok',
                            classes: 'btn-primary',
                            text: option.okText || '确认',
                            fn: function() &#123;
                                option.ok ? option.ok(that) : that.$el.modal('hide');
                            &#125;
                        &#125;, &#123;
                            type: 'cancel',
                            classes: 'btn-secondary',
                            text: '取消',
                            fn: function() &#123;
                                option.cancel ? option.cancel(that) : that.$el.modal('hide');
                            &#125;
                        &#125;],
                        'tip': [&#123;
                            type: 'tip',
                            classes: 'btn-info',
                            text: '我知道了',
                            fn: function() &#123;
                                option.confirm ? option.confirm(that) : that.$el.modal('hide');
                            &#125;
                        &#125;]
                    &#125;
                &#125;,
                formatStyle: function(obj) &#123;
                    if(!obj || $.isEmptyObject(obj)) &#123;
                        return '';
                    &#125; else &#123;
                        var res = [];
                        for(var key in obj) &#123;
                            res.push(key + ':' + obj[key]);
                        &#125;
                        return res.join(';');
                    &#125;
                &#125;,
                shown: function() &#123;
                    option.shown ? option.shown(that) : that.hideLoading();
                &#125;,
                hidden: function() &#123;
                    option.hidden && option.hidden(that);
                &#125;
            &#125;;
            if(!$(base.el).length) &#123;
                $('body').append('<div id="' + base.el.substring(1) + '" class="modal fade" style="z-index:10000;" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" data-backdrop="static"></div>');
            &#125;
            that.$el = $(base.el);
            var templete = [];
            if(base.style) &#123;
                that.$el.attr('style', base.style);
            &#125;
            templete.push('<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable ' + base.classes + '" role="document" style="' + base.formatStyle(base.styles) + '">');
            templete.push('    <div class="modal-content">');
            templete.push('        <div class="modal-header border-0 py-2" style="' + base.formatStyle(base.modalHeader.styles) + '">');
            templete.push('            <h5 class="modal-title pr-3 text-nowrap overflow-hidden" style="text-overflow:ellipsis;">' + base.modalHeader.title + '</h5>');
            templete.push('            <button type="button" class="close" style="margin:-0.5rem -1rem;padding:0.5rem 0.75rem;" data-dismiss="modal" aria-label="Close">');
            templete.push('                <span aria-hidden="true">&times;</span>');
            templete.push('            </button>');
            templete.push('        </div>');
            templete.push('        <div class="modalBody modal-body relative" style="' + base.formatStyle(base.modalBody.styles) + '">');
            templete.push('            <!--提示内容-->');
            templete.push(base.modalBody.content + base.modalBody.loading);
            templete.push('        </div>');
            if(base.modalFooter.show) &#123;
                templete.push('    <div class="modal-footer border-0" style="' + base.formatStyle(base.modalFooter.styles) + '">');
                base.modalFooter.buttons[base.modalFooter.type].forEach(function(item, index) &#123;
                    $['xmCustomModal' + index] = item.fn;
                    templete.push('    <button type="button" class="btn ' + item.classes + ' px-4" onclick="' + '$.xmCustomModal' + index + '();">' + item.text + '</button>');
                &#125;);
                templete.push('    </div>');
            &#125;
            templete.push('    </div>');
            templete.push('</div>');
            that.$el.html(templete.join(''));
            that.$el.off('hidden.bs.modal').on('hidden.bs.modal', function() &#123;
                base.hidden && base.hidden(this);
            &#125;);
            that.$el.off('shown.bs.modal').on('shown.bs.modal', function() &#123;
                base.shown && base.shown(that);
            &#125;);
            that.$el.modal('show');
            return this;
        &#125;,
        hideLoading: function() &#123;
            $('#spinLoading').hide();
            return this;
        &#125;
    &#125;
&#125;);
&#125;)();

示例：请点这里