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

以下是所有遇到同样问题的人的解决方案: 修改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);

});

这是一个非常古老的威胁，但是，对我来说，只是工作移动模式的html代码，我想在前面的第一个地方的文件。

结合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，因为这只会将它附加到现有的模态。

小提琴。

注意:所有的答案都是“hacks”，因为Bootstrap不正式支持多种情态动词。

Bootstrap一次只支持一个模式窗口。嵌套的情态动词 不支持，因为我们认为它们的用户体验很差。”

这里有一些CSS的变通/技巧…

引导5.2(2023年更新)

这个版本有一点变化，因为Bootstrap现在自动隐藏任何其他打开的模态，当一个新的打开。因此，z-index CSS将不起作用。然而，通过一个小JS，你可以强制第一个模式保持打开，当第二个模式被显示时重新显示它…(再次强调，这是一个hack，因为Bootstrap不支持多个开放模式)

const myModal = bootstrap.Modal.getOrCreateInstance('#myModal')
const myModal2El = document.getElementById('myModal2')

// when 2nd modal is shown, reshow 1st modal
myModal2El.addEventListener('show.bs.modal', event => {
    // force re-show of modal 1
    myModal.show()
})

https://codeply.com/p/mYhmJ2fNau

引导5 beta版(2021年更新)

情态动词的默认z索引再次更改为1060。因此，要覆盖情态动词和背景的使用..

.modal:nth-of-type(even) {
    z-index: 1062 !important;
}
.modal-backdrop.show:nth-of-type(even) {
    z-index: 1061 !important;
}

https://codeply.com/p/yNgonlFihM

引导4中情态动词的z指数再次更改为1050。因此，要覆盖开放情态动词和背景的使用。

引导4。x(更新2018)

.modal:nth-of-type(even) {
    z-index: 1052 !important;
}
.modal-backdrop.show:nth-of-type(even) {
    z-index: 1051 !important;
}

https://codeply.com/p/29sH0ofTZb

引导3。x(原答案)

下面是一些CSS使用第n种类型的选择器，似乎是有效的:

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

https://codeply.com/p/w8yjOM4DFb

Bootstrap 5的解决方案(纯JS)。

@A1rPun的答案启发的解决方案。

// On modal open
document.addEventListener('show.bs.modal', function(e) {

    // Get count of opened modals
    let modalsCount = 1;
    document.querySelectorAll('.modal').forEach(function(modalElement) {
        if (modalElement.style.display == 'block') {
            modalsCount++;
        }
    });

    // Set modal and backdrop z-indexes
    const zIndex = 1055 + 10 * modalsCount;
    e.target.style.zIndex = zIndex;
    setTimeout(() => {
        const backdropNotStacked = document.querySelector('.modal-backdrop:not(.modal-stack)');
        backdropNotStacked.style.zIndex = ('z-index', zIndex - 5);
        backdropNotStacked.classList.add('modal-stack');
    });

});

解释

循环所有可见的情态动词(你不能使用pseudoselector:visible，这只在jquery中) 计算新的z指数。Bootstrap 5的默认值是1055，因此:

默认值(1055)+ 10 *打开的模态数

将这个新的计算z-index设置为模态 标识背景(没有指定类的背景——在本例中是.modal-stack) 设置这个新的计算z-index -5为背景 添加类.modal-stack到背景，以防止在打开下一个模式时得到这个背景