堆叠模式在关闭时滚动主页[重复]

使用 Bootstrap 3.3.1，我无需任何额外的脚本即可获得堆叠模态（如在 Bootstrap 站点中复制粘贴模态模板并将其中的许多模态模板制作在同一页面中）。问题是，每当顶部（最高）模态关闭时，滚动焦点就会转到主页（在所有剩余模态下），并且仅在打开新模态时才返回到顶部模态。有没有办法将滚动焦点设置到下一个模式而不是主页？

当我测试解决方案时here https://stackoverflow.com/a/21816777/4339908（乃至this one https://stackoverflow.com/a/24914782/4339908）通过添加文本到body和个人modals（通过 Firefox 的“编辑为 HTML”来测试滚动）并且它具有我需要的特性。

当我使用最新的 jQuery 和 Bootstrap 进行尝试时出现的一个问题是modal-backdrop然后显示在上面modal-dialog. Upon 检查元素每当一个或多个模态出现时，我注意到div为了modal-backdrop出现在主程序中div of the modal:

<div id="myModal" class="modal fade" aria-hidden="true" style="display: none;">
  <div class="modal-backdrop fade in"></div>
  <div class="modal-dialog modal-lg"></div>
</div>

与底部相比body像这样here http://miles-by-motorcycle.com/static/bootstrap-modal/index.html。当我在该链接示例上使用 3.3.1 时，甚至会发生这种情况。我认为这导致了主要div and modal-backdrop具有修改过的z-index，但不是modal-dialog，所以我尝试通过添加一行来设置来修复它modal-dialog拥有其父母的z-index加1.它将背景放在正确的位置，但滚动问题仍然存在。这是因为 3.3.1 中的更改还是我寻找了错误的解决方案？

背景不是问题。如果顶部模态框关闭，则无法滚动显示的模态框。

您应该添加以下 JavaScript：

$('.modal').on('hidden.bs.modal', function (e) {
    // For Bootstrap 4:
    // if ($('.modal').hasClass('show')) {
    if ($('.modal').hasClass('in')) {
        $('body').addClass('modal-open');
    }    
});

demo: http://jsfiddle.net/u038t9L0/1/ http://jsfiddle.net/u038t9L0/1/

当身体有阶级时modal-open以下 CSS 将应用于您的.modals:

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

关闭模式将删除modal-open也来自模态类。