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

小提琴。

解决方案灵感来自@YermoLamers和@Ketwaroo的回答。

背景z指数修正 这个解决方案使用setTimeout，因为当事件show.bs.modal被触发时，.modal- background不会被创建。

$(document).on('show.bs.modal', '.modal', function() {
  const zIndex = 1040 + 10 * $('.modal:visible').length;
  $(this).css('z-index', zIndex);
  setTimeout(() => $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack'));
});

这适用于页面上创建的每个.modal(即使是动态模态) 背景瞬间覆盖了之前的模式

例子jsfiddle

z - index 如果你不喜欢硬编码的z指数，你可以计算页面上的最高z指数，如下所示:

const zIndex = 10 +
  Math.max(...Array.from(document.querySelectorAll('*')).map((el) => +el.style.zIndex));

滚动条修正 如果页面上的某个模态超出了浏览器的高度，那么关闭第二个模态时就不能在其中滚动。要解决这个问题，添加:

$(document).on('hidden.bs.modal', '.modal',
  () => $('.modal:visible').length && $(document.body).addClass('modal-open'));

版本 这个解决方案是用3.1.0 - 3.3.5引导程序测试的

根据耶莫·拉默斯的建议，这似乎是一个更短的版本。即使是基本的动画，如淡入/淡出，甚至疯狂的蝙蝠侠报纸旋转。http://jsfiddle.net/ketwaroo/mXy3E/

$('.modal').on('show.bs.modal', function(event) {
    var idx = $('.modal:visible').length;
    $(this).css('z-index', 1040 + (10 * idx));
});
$('.modal').on('shown.bs.modal', function(event) {
    var idx = ($('.modal:visible').length) -1; // raise backdrop after animation.
    $('.modal-backdrop').not('.stacked').css('z-index', 1039 + (10 * idx));
    $('.modal-backdrop').not('.stacked').addClass('stacked');
});

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

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

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

A1rPun的答案在一个小的修改后完美地工作(Bootstrap 4.6.0)。我的名声不允许我评论，所以我会在网上回复。

我只是替换了。modal.show的每个。modal:visible。

因此，在打开多个情态动词时修复背景:

$(document).on('show.bs.modal', '.modal', function () {
    var zIndex = 1040 + (10 * $('.modal.show').length);
    $(this).css('z-index', zIndex);
    setTimeout(function() {
        $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
    }, 0);
});

和，修复滚动条:

$(document).on('hidden.bs.modal', '.modal', function () {
    $('.modal.show').length && $(document.body).addClass('modal-open');
});