当解决堆叠模态滚动主页时，当一个关闭时，我发现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版本。固定固定模式背景覆盖模式的滚动条，但上述解决方案似乎也适用于早期版本。

终于解决了。我对它进行了多种测试，效果很好。

以下是所有遇到同样问题的人的解决方案: 修改Modal.prototype.show函数(在bootstrap.js或modal.js中)

来自:

if (transition) {
   that.$element[0].offsetWidth // force reflow
}   

that.$element
   .addClass('in')
   .attr('aria-hidden', false)

that.enforceFocus()

TO:

if (transition) {
    that.$element[0].offsetWidth // force reflow
}

that.$backdrop
   .css("z-index", (1030 + (10 * $(".modal.fade.in").length)))

that.$element
   .css("z-index", (1040 + (10 * $(".modal.fade.in").length)))
   .addClass('in')
   .attr('aria-hidden', false)

that.enforceFocus()

这是我发现的最好的方法:检查打开了多少个模态，并将模态和背景的z-index更改为更高的值。

我也遇到过类似的情况，经过一番研究，我找到了一个解决方案。虽然我不擅长JS，但我还是设法写下了一个小查询。

http://jsfiddle.net/Sherbrow/ThLYb/

<div class="ingredient-item" data-toggle="modal" data-target="#myModal">test1 <p>trerefefef</p></div>
<div class="ingredient-item" data-toggle="modal" data-target="#myModal">tst2 <p>Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p></div>
<div class="ingredient-item" data-toggle="modal" data-target="#myModal">test3 <p>afsasfafafsa</p></div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>





$('.ingredient-item').on('click', function(e){

   e.preventDefault();

    var content = $(this).find('p').text();

    $('.modal-body').html(content);

});

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

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

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

希望这能帮助到一些人。

在modal.js中添加全局变量

var modalBGIndex = 1040; // modal backdrop background
var modalConIndex = 1042; // modal container data 

//添加变量modal .prototype. background

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

modalConIndex = modalConIndex + 2; // add this line inside "Modal.prototype.show"

that.$element
    .show()
    .scrollTop(0)
that.$element.css('z-index',modalConIndex) // add this line after show modal 

if (this.isShown && this.options.backdrop) {
      var doAnimate = $.support.transition && animate

      modalBGIndex = modalBGIndex + 2; // add this line increase modal background index 2+

this.$backdrop.addClass('in')
this.$backdrop.css('z-index',modalBGIndex) // add this line after backdrop addclass

$(window).scroll(function(){
    if($('.modal.in').length && !$('body').hasClass('modal-open'))
    {
              $('body').addClass('modal-open');
    }

});