每次你运行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');

尝试在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

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

如果你想要一个特定的模态出现在另一个开放模态的顶部，试着在另一个模态div之后添加最上面的模态的HTML。

这招对我很管用:

<div id="modal-under" class="modal fade" ... />

<!--
This modal-upper should appear on top of #modal-under when both are open.
Place its HTML after #modal-under. -->
<div id="modal-upper" class="modal fade" ... />

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

对我来说，这些简单的scss规则非常有效:

.modal.show{
  z-index: 1041;
  ~ .modal.show{
    z-index: 1043;
  }
}
.modal-backdrop.show {
  z-index: 1040;
  + .modal-backdrop.show{
    z-index: 1042;
  }
}

如果这些规则导致错误的模态在你的情况下，要么改变你的模态div的顺序，或者在上面的scss中改变(奇数)为(偶数)。