编辑:Bootstrap 3.3.4已经解决了这个问题(和其他模式问题)，所以如果你可以更新你的Bootstrap CSS和JS，这将是最好的解决方案。如果你不能更新下面的解决方案仍然可以工作，基本上做同样的事情，bootstrap 3.3.4(重新计算和应用填充)。

Bass Jobsen指出，Bootstrap的新版本已经解决了z指数问题。模态开放类和填充右仍然是我的问题，但这个脚本的灵感来自Yermo Lamers解决方案解决了它。只要把它放到JS文件中就可以了。

$(document).on('hide.bs.modal', '.modal', function (event) {
    var padding_right = 0;
    $.each($('.modal'), function(){
        if($(this).hasClass('in') && $(this).modal().data('bs.modal').scrollbarWidth > padding_right) {
            padding_right = $(this).modal().data('bs.modal').scrollbarWidth
        }
    });
    $('body').data('padding_right', padding_right + 'px');
});

$(document).on('hidden.bs.modal', '.modal', function (event) {
    $('body').data('open_modals', $('body').data('open_modals') - 1);
    if($('body').data('open_modals') > 0) {
        $('body').addClass('modal-open');
        $('body').css('padding-right', $('body').data('padding_right'));
    }
});

$(document).on('shown.bs.modal', '.modal', function (event) {
    if (typeof($('body').data('open_modals')) == 'undefined') {
        $('body').data('open_modals', 0);
    }
    $('body').data('open_modals', $('body').data('open_modals') + 1);
    $('body').css('padding-right', (parseInt($('body').css('padding-right')) / $('body').data('open_modals') + 'px'));
});

每次你运行sys。showModal函数增加z-index并将其设置为新的模态。

function system() {

    this.modalIndex = 2000;

    this.showModal = function (selector) {
        this.modalIndex++;

        $(selector).modal({
            backdrop: 'static',
            keyboard: true
        });
        $(selector).modal('show');
        $(selector).css('z-index', this.modalIndex );       
    }

}

var sys = new system();

sys.showModal('#myModal1');
sys.showModal('#myModal2');

对我来说，解决这个问题的方法是不要在我的modal div上使用“fade”类。

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到背景，以防止在打开下一个模式时得到这个背景

看看这个!这个解决方案解决了我的问题，几个简单的CSS行:

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

这是我找到它的地方的链接:Bootply 只要确保需要出现在顶部的.modual在HTML代码中处于第二，这样CSS就可以发现它是“偶数”。

在我的案例中，这个问题是由一个浏览器扩展引起的，它包括bootstrap.js文件，其中show事件处理了两次，并且添加了两个modal- background div，但是当关闭modal时，只删除了其中一个。

发现通过在chrome的body元素中添加子树修改断点，并跟踪添加了modal- background div。