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

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

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

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

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

可见背景的z指数在show.bs.modal和hidden.bs.modal事件中都被更新:

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

注意:所有的答案都是“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到背景，以防止在打开下一个模式时得到这个背景

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

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

如果你正在寻找Bootstrap 4的解决方案，有一个简单的使用纯CSS:

.modal.fade {
    background: rgba(0,0,0,0.5);
}

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

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