多个模态对话框滚动条Bootstrap v.3.3.5不能正常工作

Question

我modal dialog用bootstrap v.3.3.5 创建了多个.当我启动第一个时modal dialog,右边的滚动条工作正常,但是在我启动第二个modal dialog滚动条后关闭它,滚动条消失了.

在bootstrap v.3.0.0中没有任何问题,你可以在下面的demo中看到

带有bootstrap v.3.0.0的模态对话框

但是,在bootstrap v.3.3.5中存在问题

带有bootstrap v.3.3.5的模态对话框

Answer 1

DEMO

由于某种原因,它正在modal-open从正文中删除我的类,这个滚动条消失了.所以这里有一个巧妙的技巧来捕获close事件.modal并检查是否有任何.modal打开,如果是,则添加.modal-open类body

$("#myModal2").on('hidden.bs.modal', function (event) {
  if ($('.modal:visible').length) //check if any modal is open
  {
    $('body').addClass('modal-open');//add class to body
  }
});

现在如果你有多个模态相互嵌套,只需替换$("#myModal2")为$(document)

UPDATE

最近我开始知道这可以用纯CSS完成,只需一行如下:

.modal{
   overflow:auto !important;
}

更新的演示

Answer 2

动态添加模态

$(document).on('hidden.bs.modal', '.modal', function () {
    if ($('body').find('.modal.in').length > 0) {
        $('body').addClass('modal-open');
    }
});

Bootstrap 4的更新

$(document).on('hidden.bs.modal', '.modal', function () {
    if ($('body').find('.modal.show').length > 0) {
        $('body').addClass('modal-open');
    }
});