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

问题：在调用bootstrap的模态框后，触发模态框上的一个事件，再在本模态框上再跳出一个模态框。

方法：

个人开发中遇到的多重模态框的问题，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文件，不是bootstrap.min.js文件，我在bootstrap.min.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 })

​

亲测有效，这个方法没有第一个方法那种卡顿的现象，但是修改源文件总是觉得不大好，可没有找到其他方法.....