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

cnjp1d6j  于 2023-02-06  发布在  其他
关注(0)|答案(3)|浏览(155)

我正在使用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;
        }); 
    });
oxf4rvwz

oxf4rvwz1#

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

不支持多个打开模态

请确保在一个模态仍然可见时不要打开另一个模态。一次显示多个模态需要自定义代码。
http://getbootstrap.com/javascript/#modals
简而言之,你必须自己处理这个问题,你所看到的很可能是绝对位置和z-index值对于覆盖图来说是相同的。
目前,我还不知道Bootbox或Bootstrap中有什么东西可以让你直接操作模态的背景,最接近的是一个禁用背景的选项,你可以通过传递backdrop: false作为选项之一来实现。

tzcvj98z

tzcvj98z2#

好答案从这里: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。

zlwx9yxi

zlwx9yxi3#

我处理这个问题的一个方法是覆盖bootbox模态和模态背景的z索引,使其位于标准模态z索引1050之上。
我添加了两个css类:

.bootbox.modal {
    z-index: 1070 !important;
}
.modal-backdrop.bootbox-above-modal {
    z-index: 1060 !important;
}

然后我禁用了默认的bootbox模态背景,并使用jquery添加了自己的模态背景:

bootbox.dialog({
    message: 'My alert!',
    backdrop: false,
    onShow: e => $('body').append('<div class="modal-backdrop fade show bootbox-above-modal"></div>'),
    onHide: e => $('.modal-backdrop.bootbox-above-modal').remove()
})

相关问题