Bootstrap 4模态框嵌套：如何让灰色背景显示在顶层模态框后方

你遇到的问题是Bootstrap默认多模态框叠加时，背景层（modal-backdrop）的层级低于底层模态框，导致背景被底层模态框遮挡。可以通过以下两种方式解决：

方案一：调整CSS层级 #

直接给顶层模态框及其背景设置更高的z-index，确保背景在底层模态框之上、顶层模态框之下：

/* 提升顶层模态框的层级，高于默认模态框的1050 */
#suggest_modal {
    z-index: 1060;
}

/* 对应背景层的层级，比顶层模态框低，比底层模态框高 */
#suggest_modal + .modal-backdrop {
    z-index: 1059;
}

方案二：结合JS控制背景显示 #

打开顶层模态框时隐藏底层模态框的背景，关闭时恢复，配合层级调整效果更稳妥：

// 点击按钮打开顶层模态框
$('#m_suggest').click(function(e) {
    // 隐藏底层模态框的背景
    $('#profile_modal').next('.modal-backdrop').addClass('d-none');
    $('#suggest_modal').modal('show');
});

// 顶层模态框关闭时，恢复底层模态框的背景
$('#suggest_modal').on('hidden.bs.modal', function () {
    $('#profile_modal').next('.modal-backdrop').removeClass('d-none');
});

补充说明 #

Bootstrap模态框默认的z-index规则是：模态框为1050，对应背景层为1040。当打开多个模态框时，新背景层的z-index不会自动提升，因此会被之前的模态框遮挡。上述两种方式，要么直接调整层级让顶层背景处于正确位置，要么临时隐藏底层背景，都能实现你需要的“顶层模态框背景在其后方”的效果。

内容的提问来源于stack exchange，提问作者arun kumar