结合A1rPun的回答和StriplingWarrior的建议，我想到了这个:

$(document).on({
    'show.bs.modal': function () {
        var zIndex = 1040 + (10 * $('.modal:visible').length);
        $(this).css('z-index', zIndex);
        setTimeout(function() {
            $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
        }, 0);
    },
    'hidden.bs.modal': function() {
        if ($('.modal:visible').length > 0) {
            // restore the modal-open class to the body element, so that scrolling works
            // properly after de-stacking a modal.
            setTimeout(function() {
                $(document.body).addClass('modal-open');
            }, 0);
        }
    }
}, '.modal');

工作甚至动态模态添加后，并消除了第二个滚动条的问题。最值得注意的是，我发现这个功能很有用，它将模态中的表单与Bootbox警报的验证反馈集成在一起，因为这些使用动态模态，因此需要将事件绑定到document，而不是.modal，因为这只会将它附加到现有的模态。

小提琴。

当解决堆叠模态滚动主页时，当一个关闭时，我发现Bootstrap的新版本(至少自3.0.3版本以来)不需要任何额外的代码来堆叠模态。

您可以向页面添加多个模态(当然有不同的ID)。当打开多个模态时发现的唯一问题是关闭一个模态时删除了体选择器的模态打开类。

你可以使用下面的Javascript代码来重新添加modal-open:

$('.modal').on('hidden.bs.modal', function (e) {
    if($('.modal').hasClass('in')) {
    $('body').addClass('modal-open');
    }    
});

在不需要背景效果的情况下，你可以设置data- background ="false"。

3.1.1版本。固定固定模式背景覆盖模式的滚动条，但上述解决方案似乎也适用于早期版本。

没有脚本解决方案，只使用css给你有两层情态，设置第2个情态为更高的z索引

.second-modal { z-index: 1070 }

div.modal-backdrop + div.modal-backdrop {
   z-index: 1060; 
}

每个模态都应该有一个不同的id，每个链接都应该指向不同的模态id。所以应该是这样的:

<a href="#myModal" data-toggle="modal">
...
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
...
<a href="#myModal2" data-toggle="modal">
...
<div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
...

尝试在bootply上将以下内容添加到JS中

$('#myModal2').on('show.bs.modal', function () {  
$('#myModal').css('z-index', 1030); })

$('#myModal2').on('hidden.bs.modal', function () {  
$('#myModal').css('z-index', 1040); })

解释:

在摆弄了属性之后(使用Chrome的开发工具)，我意识到任何低于1031的z-index值都会把东西放在背景后面。

所以通过使用bootstrap的模态事件句柄，我将z-index设置为1030。如果显示#myModal2，如果隐藏#myModal2，则将z-index设置为1040。

Demo

这段代码非常适合用于引导4。其他代码中的问题是如何选择模态背景。这将是更好的，如果你使用jQuery的下一个选择在实际的模态已经显示。

(文档)。(“show.bs美元。模态”、“。Modal '， function () { var zIndex = 1040 + (10 * $('.modal').length); Var模型= $(this); model.css (z - index, zIndex); 模型。attr (data-z-index, zIndex); })； (文档)。(“shown.bs美元。模态”、“。Modal '， function () { Var模型= $(this); var zIndex = model.attr('data-z-index'); model.next('.modal- background .show').css('z-index'， zIndex - 1); })；