我的解决方案自举4，与无限深度的模态和动态模态工作。

$('.modal').on('show.bs.modal', function () {
    var $modal = $(this);
    var baseZIndex = 1050;
    var modalZIndex = baseZIndex + ($('.modal.show').length * 20);
    var backdropZIndex = modalZIndex - 10;
    $modal.css('z-index', modalZIndex).css('overflow', 'auto');
    $('.modal-backdrop.show:last').css('z-index', backdropZIndex);
});
$('.modal').on('shown.bs.modal', function () {
    var baseBackdropZIndex = 1040;
    $('.modal-backdrop.show').each(function (i) {
        $(this).css('z-index', baseBackdropZIndex + (i * 20));
    });
});
$('.modal').on('hide.bs.modal', function () {
    var $modal = $(this);
    $modal.css('z-index', '');
});

我意识到一个答案已经被接受，但我强烈建议不要破解bootstrap来解决这个问题。

通过连接show .bs.modal和hidden.bs.modal事件处理程序并在那里调整z-index，可以很容易地达到同样的效果。

下面是一个工作示例

更多信息可以在这里找到。

这个解决方案自动工作于任意深度的堆栈模态。

脚本源代码:

$(document).ready(function() {

    $('.modal').on('hidden.bs.modal', function(event) {
        $(this).removeClass( 'fv-modal-stack' );
        $('body').data( 'fv_open_modals', $('body').data( 'fv_open_modals' ) - 1 );
    });

    $('.modal').on('shown.bs.modal', function (event) {
        // keep track of the number of open modals
        if ( typeof( $('body').data( 'fv_open_modals' ) ) == 'undefined' ) {
            $('body').data( 'fv_open_modals', 0 );
        }

        // if the z-index of this modal has been set, ignore.
        if ($(this).hasClass('fv-modal-stack')) {
            return;
        }

        $(this).addClass('fv-modal-stack');
        $('body').data('fv_open_modals', $('body').data('fv_open_modals' ) + 1 );
        $(this).css('z-index', 1040 + (10 * $('body').data('fv_open_modals' )));
        $('.modal-backdrop').not('.fv-modal-stack').css('z-index', 1039 + (10 * $('body').data('fv_open_modals')));
        $('.modal-backdrop').not('fv-modal-stack').addClass('fv-modal-stack'); 

    });        
});

不幸的是，我没有评论的声誉，但应该注意的是，采用硬编码基准1040 z-index的公认解决方案似乎优于试图找到在页面上呈现的最大zIndex计算。

似乎某些扩展/插件依赖于顶级DOM内容，这使得. max计算如此大，以至于它不能再增加zIndex。这会导致一个模态，其中覆盖出现在模态不正确(如果你使用Firebug/谷歌检查器工具，你会看到一个zIndex在2^n - 1的顺序)

我一直无法分离出数学的各种形式的具体原因是什么。z-Index的Max会导致这种情况，但它可能会发生，而且它对少数用户来说是独特的。(我在browserstack上的一般测试让这段代码完美地工作)。

希望这能帮助到一些人。

对我来说，解决这个问题的方法是不要在我的modal div上使用“fade”类。

如果你想要一个特定的模态出现在另一个开放模态的顶部，试着在另一个模态div之后添加最上面的模态的HTML。

这招对我很管用:

<div id="modal-under" class="modal fade" ... />

<!--
This modal-upper should appear on top of #modal-under when both are open.
Place its HTML after #modal-under. -->
<div id="modal-upper" class="modal fade" ... />

看看这个!这个解决方案解决了我的问题，几个简单的CSS行:

.modal:nth-of-type(even) {
z-index: 1042 !important;
}
.modal-backdrop.in:nth-of-type(even) {
    z-index: 1041 !important;
}

这是我找到它的地方的链接:Bootply 只要确保需要出现在顶部的.modual在HTML代码中处于第二，这样CSS就可以发现它是“偶数”。