twitter-bootstrap - 打开第二个模式后，Bootbox 模式不可滚动

Question

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

我最初正在创建一个 Bootstrap 框对话框:

// 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});

创建另一个 Bootstrap 框对话框/警报/提示并关闭它后，滚动不再影响第一个对话框。网页内容移动，第一个对话框保持卡住状态(意外行为)。我该如何解决？

可以单击第一个对话框中可见的任何按钮，并且主页上的按钮不可单击(预期行为)。

Answer 1

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

解决方案一

在 modal-open 关闭第二个模式时到 body 。

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

Solution 1

解决方案二

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

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

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

Solution 2

-帮助 :)