在另一个模态之上打开一个引导框模态不会使后面的模态变暗

Question

我正在使用 bootbox，并且我的模态框上有一个按钮，当单击它时，它会打开另一个模态框。问题是当新的modal打开时，它后面的modal并没有变暗。相反，两个模态背后的背景变得更加暗淡。我该怎么做才能解决它？

这是我的示例代码：

        $('#new-btn').click(function () {
        new_room_form = bootbox.dialog({
            title: "New room",
            message: 
                '<div class="row">' +
                    '<div class="col-md-12">' +
                    '<form>' +
                        '<fieldset style="padding: 20px">' +
                            '<legend>Example:</legend>' +
                            '<div class="form-group">' +
                                '<button class="btn btn-primary" id="add">Add</button>' +
                            '</div>' +

                        '</fieldset>' +
                    '</form>' +
                '</div>' +
            '</div>',
            buttons: {
                cancel: {
                    label: "Cancel",
                    className: "btn btn-default"
                },
                add: {
                    label: "Add",
                    className: "btn btn-primary",
                }

            }
    }); // end bootbox dialog      

     $('#add').on('click', function(response) {
            bootbox.alert("Hello world!", function() {
            });
             return false;
        }); 
    });

Answer 1

Bootbox 主要是一个包装器/帮助器库，旨在使 Bootstrap 模态更易于使用。因此，它具有 Bootstrap 的所有限制，包括：

不支持多个打开模式

请确保不要在另一个模式仍然可见时打开模式。显示 一次多个模式需要自定义代码。

http://getbootstrap.com/javascript/#modals

简而言之，您必须自己处理。您看到的可能是叠加层的绝对定位和 z-index 值相同的结果。

目前，我不知道 Bootbox 或 Bootstrap 中有任何东西可以让您直接操纵模式的背景。您获得的最接近的是禁用背景的选项，您可以通过传递 backdrop: false 作为选项之一来做到这一点。

Answer 2

来自这里的好答案：https://newbedev.com/multiple-modals-overlay 在这里：Multiple modals overlay

将此脚本添加到您的 HTML：

 <script type="text/javascript">      
    $(document).on('show.bs.modal', '.modal', function () {
      var zIndex = 1040 + (10 * $('.modal:visible').length);
      $(this).css('z-index', zIndex);
      setTimeout(function () {
        $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
      }, 0);
    });
  </script>

说明： 在模态显示事件上，脚本获取显示模态的计数，然后计算并应用此模态背景的 zindex 为 (1040 + (10 * n)) 其中 n 是打开模态的数量。使用 setTimout 是因为创建元素的时间安排。