Bootstrap 4.5的简单解决方案

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

.modal-backdrop.fade {
  opacity: 0;
}

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

适用于开启/关闭多种模式

jQuery(function()
{
    jQuery(document).on('show.bs.modal', '.modal', function()
    {
        var maxZ = parseInt(jQuery('.modal-backdrop').css('z-index')) || 1040;

        jQuery('.modal:visible').each(function()
        {
            maxZ = Math.max(parseInt(jQuery(this).css('z-index')), maxZ);
        });

        jQuery('.modal-backdrop').css('z-index', maxZ);
        jQuery(this).css("z-index", maxZ + 1);
        jQuery('.modal-dialog', this).css("z-index", maxZ + 2);
    });

    jQuery(document).on('hidden.bs.modal', '.modal', function () 
    {
        if (jQuery('.modal:visible').length)
        {
            jQuery(document.body).addClass('modal-open');

           var maxZ = 1040;

           jQuery('.modal:visible').each(function()
           {
               maxZ = Math.max(parseInt(jQuery(this).css('z-index')), maxZ);
           });

           jQuery('.modal-backdrop').css('z-index', maxZ-1);
       }
    });
});

演示

https://www.bootply.com/cObcYInvpq#

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

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

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

尝试在bootply上将以下内容添加到JS中

$('#myModal2').on('show.bs.modal', function () {  
$('#myModal').css('z-index', 1030); })

$('#myModal2').on('hidden.bs.modal', function () {  
$('#myModal').css('z-index', 1040); })

解释:

在摆弄了属性之后(使用Chrome的开发工具)，我意识到任何低于1031的z-index值都会把东西放在背景后面。

所以通过使用bootstrap的模态事件句柄，我将z-index设置为1030。如果显示#myModal2，如果隐藏#myModal2，则将z-index设置为1040。

Demo