第二个模态不把背景放在第一个上

Question

所以我有一个 bootstrap 模式，当你点击一个按钮时它会弹出。在该模态中有一个按钮可以在第一个模态之上打开另一个模态。然而，深色背景并没有落在第一个模态之上，而是在它后面。

这是第一个模态：

<div class="modal fade" id="result-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">

这是我的第二个模态：

<div class="modal fade" id="resultdetail-modal" tabindex="-1" role="dialog" aria-labelledby="resultdetail-modal">
<div class="modal-dialog " role="document">
 <div class="modal-content">
 <div class="modal-body">

Answer 1

添加此脚本即可解决问题

$(document).ready(function () {
    $('#resultdetail-modal').on('show.bs.modal', function () {
        $('#result-modal').css('z-index', 1039);
    });

    $('#resultdetail-modal').on('hidden.bs.modal', function () {
        $('#result-modal').css('z-index', 1041);
    });
});

Fiddle

原因：为什么深色背景没有落在第一个模态的顶部而是在它后面。

任何低于 1039 的 z-index 值都会把东西放在背景后面。

因此，如果显示 #resultdetail-modal，则使用 bootstrap 的模态事件句柄将 z-index 设置为 1039，如果隐藏 #resultdetail-modal，则将 z-index 设置回 1041 #result-modal 再次出现。

Answer 2

默认情况下，所有模态都有相同的z-index 属性。如果您需要确保 div#resultdetail-modal 始终位于其他模态框之上，请将其添加到您的 CSS.

#resultdetail-modal {z-index:1050;}

P.S。任何大于 1040 的值都可以。

第二个模态不把背景放在第一个上

Second modal doesn't put backdrop on first one

javascript

css

modal-dialog

bootstrap-modal