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

Question

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

这是我的示例代码：

        $('#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 主要只是一个 wrapper/helper 库，旨在使 Bootstrap 模式更易于使用。因此，它具有 Bootstrap 的所有限制，其中包括：

Multiple open modals not supported

Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.

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。

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

Opening a bootbox modal on top of another modal does not make the modal at the back dim

javascript

css

jquery

twitter-bootstrap

bootbox

Multiple open modals not supported