堆叠引导模式窗口时的背景滚动条答案

【问题标题】：background scrolling bar when stacking bootstrap modal windwos堆叠引导模式窗口时的背景滚动条
【发布时间】：2017-01-06 23:22:31
【问题描述】：

我有一个在线表格，我想通过堆叠模式窗口来完成（这样才有意义）。打开两个模态窗口，然后关闭最上面的一个，但是滚动条会从模态窗口下方的内容中恢复。

这是一个例子：

http://www.bootply.com/FGNRPwSRgH

关闭第二个窗口时只看屏幕右侧。

对此我能做些什么吗？我是 Bootstrap 的新手，我希望能够仅通过 CSS 和 bootstrap 来解决这个问题，但是 JavaScript 也不是不可能的。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

当您打开第一个模态时，iframe 的主体标签将获得一个禁用滚动的“modal-open”类，当您打开第二个模态时，该类仍然存在。当您关闭第二个模式时，“modal-open”类将被删除，这就是滚动返回的原因。这可能是由于您嵌套这些模式的方式。它只是想从正文中删除该类，而不知道您还有一个打开的。您很可能需要使用 javascript 添加某种检查步骤，以确定在关闭每个模态时是否仍有显示属性为 block 的模态，如果是，请确保模态打开类仍然设置在主体上。我会在你可以收听的那些模式的关闭时寻找一个回调函数。

【讨论】：

我将在第二个模态框的末尾单击一下，这会将类添加回正文。感谢您的帮助

【解决方案2】：

http://www.bootply.com/8K2wKO0c7I

$('body').append(
  $('<script />',{src:'//rawgit.com/sbreiler/bootstrap-multi-modals/master/bootstrap-multi-modals.js'})
);

如果它适合您，请从我的 github 获取 *.js 文件的副本：https://github.com/sbreiler/bootstrap-multi-modals

【讨论】：