jquery - 多模态对话框滚动条 Bootstrap v.3.3.5 运行不正常

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