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

Question

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

这是第一个模态:

<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又出现了。