这是一个非常古老的威胁，但是，对我来说，只是工作移动模式的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更改为更高的值。

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

检查情态动词的计数，并将值添加到背景作为z-index

    var zIndex = 1500 + ($('.modal').length*2) + 1;
    this.popsr.css({'z-index': zIndex});

    this.popsr.on('shown.bs.modal', function () {
        $(this).next('.modal-backdrop').css('z-index', zIndex - 1);
    });

    this.popsr.modal('show');

我的解决方案自举4，与无限深度的模态和动态模态工作。

$('.modal').on('show.bs.modal', function () {
    var $modal = $(this);
    var baseZIndex = 1050;
    var modalZIndex = baseZIndex + ($('.modal.show').length * 20);
    var backdropZIndex = modalZIndex - 10;
    $modal.css('z-index', modalZIndex).css('overflow', 'auto');
    $('.modal-backdrop.show:last').css('z-index', backdropZIndex);
});
$('.modal').on('shown.bs.modal', function () {
    var baseBackdropZIndex = 1040;
    $('.modal-backdrop.show').each(function (i) {
        $(this).css('z-index', baseBackdropZIndex + (i * 20));
    });
});
$('.modal').on('hide.bs.modal', function () {
    var $modal = $(this);
    $modal.css('z-index', '');
});

注意:所有的答案都是“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