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

Question

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

当我通过向body 和单个modals（通过Firefox 的“编辑为HTML”来测试滚动）添加文本来测试解决方案here（甚至this one）时，它具有我需要。

当我尝试使用最新的 jQuery 和 Bootstrap 时出现的一个问题是 modal-backdrop 然后显示在 modal-dialog 上方。 检查元素 每当一个或多个模态出现时，我注意到modal-backdrop 的div 出现在modal 的主要div 中：

<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。当我在该链接示例上使用 3.3.1 时，甚至会发生这种情况。我认为这导致主要的div 和modal-backdrop 具有修改后的z-index，但不是modal-dialog，所以我尝试通过添加一行将modal-dialog 设置为具有其父级的@987654340 来修复它@ plus 1. 它把背景放在适当的位置，但滚动问题仍然存在。这是因为 3.3.1 的变化还是我看错了解决方案？

Answer 1

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

您应该添加以下 Javascript：

$('.modal').on('hidden.bs.modal', function (e) {
    if($('.modal').hasClass('in')) {
    $('body').addClass('modal-open');
    }    
});

演示：http://jsfiddle.net/u038t9L0/1/

当正文具有 modal-open 类时，将为您的 .modals 应用以​​下 CSS：

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

关闭模式也会从模式中删除modal-open 类。