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

Question

JS小提琴:http://jsfiddle.net/9y7nrx9m/2/

我最初创建一个bootbox对话框:

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

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

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

Answer 1

Bootstrap模态由单模态查看组成,但是如果我们想要模态模态,那么当当前模态接近时,dom会被重置并且将从主体标签modal-open中移除,这会导致滚动问题.

解决方案1

同时关闭第二个模态modal-open到身体.

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

解决方案1

解决方案2

您也可以使用css实现相同的功能.

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

这将使模态可滚动,但将有2个滚动条.

解决方案2

-救命 :)