Bootstrap双重模态框显示解决方案

个人开发中遇到的多重模态框的问题，查询许久之后，记录一下

注意：第二个模态框的div在html代码上一定要在第一个模态框的div之后

方案一：

在多重模态框的的当前页面加上两个代码片段

$(document).on('show.bs.modal', '.modal', function(event) {
        $(this).appendTo($('body'));
    }).on('shown.bs.modal', '.modal.in', function(event) {
        setModalsAndBackdropsOrder();
    }).on('hidden.bs.modal', '.modal', function(event) {
        setModalsAndBackdropsOrder();
    });

function setModalsAndBackdropsOrder() {  
        var modalZIndex = 1040;
        $('.modal.in').each(function(index) {
            var $modal = $(this);
            modalZIndex++;
            $modal.css('zIndex', modalZIndex);
            $modal.next('.modal-backdrop.in').addClass('hidden').css('zIndex', modalZIndex - 1);
        });
        $('.modal.in:visible:last').focus().next('.modal-backdrop.in').removeClass('hidden');
    }

亲测有效，但是有个问题，第二个模态框打开会有卡顿一下再显示在第一个模态框之上

方法二：

修改bootstrap.js文件，将下面的代码块加在这个文件中第二段代码之前就行了

var modalLen = $(".modal-backdrop").length,

zIndex = $(".modal-backdrop").eq(0).css("z-index");

for(var i = 1; i < modalLen; i ++){

$(".modal-backdrop").eq(i).css({

"z-index": zIndex + i * 10 + 1

});

$(".modal.in").eq(i).css({

"z-index": zIndex + (i + 1) * 10 + 1

});

}

var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })

这个方法没有第一个方法那种卡顿的现象