打开第二个模态后，Bootbox 模态不可滚动

Question

JS fiddle: http://jsfiddle.net/9y7nrx9m/2/

我最初正在创建一个引导框对话框：

// First dialog
bootbox.dialog({
    message: '<input type="button" value="Open second modal" class="second" />' + '<br/>bar'.repeat(100),
    allowCancel: true
});

滚动现在会影响对话框并且网页保持原位。

// Second dialog
bootbox.dialog({message: "Second dialog!", allowCancel: true});

创建另一个引导框 dialog/alert/prompt 并将其关闭后，滚动不再影响第一个对话框。网页内容移动，第一个对话框保持冻结状态（意外行为）。我该如何解决这个问题？

可以单击第一个对话框中可见的任何按钮，但主页上的按钮不可单击（预期行为）。

Answer 1

Bootstrap 模态由单个模态视图组成，但如果我们想在模态之上显示模态，那么当当前模态关闭时，dom 会重置并从 body 标签 modal-open 将被删除，这会导致滚动问题。

解决方案 1

在 modal-open 处关闭第二个模态到正文。

 $('.bootbox.modal').on('hidden.bs.modal', function () {
  if($(".modal").hasClass('in')){
             $('body').addClass('modal-open');
         }
})

Solution 1

解决方案 2

您也可以使用 css 实现同样的效果。

.bootbox.modal{
  overflow: auto !important;
}

这将使模态可滚动，但会有 2 个滚动条。

Solution 2

-求助:)

Answer 2

根据帮助答案，在 bootstrap 4 中你必须使用

$(document).on('hidden.bs.modal', '.bootbox.modal', function (e) {    
        if($(".modal").hasClass('show')) {
            $('body').addClass('modal-open');
        }
})

Answer 3

在bootstrap3中你必须使用这个代码：

$(document).on('hidden.bs.modal', '.bootbox.modal', function (e) {    
        if($(".modal").hasClass('in')) {
            '$('body').addClass('modal-open');
        }
});

打开第二个模态后，Bootbox 模态不可滚动

Bootbox modal is not scrollable after a second modal is opened

twitter-bootstrap

bootstrap-modal

bootbox