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值都会将事情置于背景之下。

因此，通过使用bootstrap的模态事件句柄，如果显示#resultdetail-modal，则将z-index设置为1039，如果隐藏#resultdetail-modal并且#result-modal显示，则将z-index设置回1041试。

Answer 2

默认情况下，所有模态都具有相同的z-index属性。如果您需要确保将div#resultdetail-modal始终放在另一个模态的顶部，请将其添加到您的CSS中。

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

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

第二种模式并没有将背景放在第一种模式上

2 个答案: