受@YermoLamers 和@Ketwaroo 的回答启发的解决方案。

背景 z-index 修复
此解决方案使用 a，setTimeout因为在触发.modal-backdrop事件时未创建show.bs.modal。

$(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-index，您可以像这样计算页面上的最高 z-index：

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'));

版本
此解决方案已使用 bootstrap 3.1.0 - 3.3.5 进行测试

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

你可以很容易地通过挂钩showed.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'); 

    });        
});

结合 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 警报的验证反馈进行集成，因为它们使用动态模态，因此需要您将事件绑定到文档而不是 .modal，因为这只会将它附加到现有的模态。

在这里摆弄。

根据 Yermo Lamers 的建议缩短了一些版本，这似乎没问题。即使是基本的动画，如淡入/淡出，甚至疯狂的蝙蝠侠报纸旋转。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');
});

我创建了一个 Bootstrap 插件，其中包含了这里发布的许多想法。

Bootply 上的演示：http : //www.bootply.com/cObcYInvpq

Github：https : //github.com/jhaygt/bootstrap-multimodal

它还解决了连续模态导致背景变得越来越暗的问题。这确保在任何给定时间只有一个背景可见：

if(modalIndex > 0)
    $('.modal-backdrop').not(':first').addClass('hidden');

可见背景的 z-index 在show.bs.modal和hidden.bs.modal事件上更新：

$('.modal-backdrop:first').css('z-index', MultiModal.BASE_ZINDEX + (modalIndex * 20));