Question

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

在bootstrap v.3.0.0中没有任何问题，您可以在下面的演示

中看到

modal dialog with bootstrap v.3.0.0

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

modal dialog with bootstrap v.3.3.5

Answer 1

<强> DEMO

出于某种原因，它正在从正文中删除我的modal-open类，此滚动条消失了。所以这里有一个巧妙的技巧来捕捉.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)

<强>更新

最近我发现这可以用纯CSS完成，只需要一行如下：

.modal{
   overflow:auto !important;
}

<强> UPDATED DEMO

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

Answer 3

做一件事，只需在CSS中添加以下内容：

#myModal{
 overflow:auto !important;
}

希望它有所帮助!!

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

3 个答案: