Question

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

当我通过向body和个人modals添加文字来测试解决方案here（甚至是this one）时（通过Firefox＆＃39;＆＃34;编辑为HTML＆＃34;测试滚动），它具有我需要的特性。

当我使用最新的jQuery和Bootstrap尝试它时出现的问题是，modal-backdrop显示在modal-dialog之上。每当一个或多个模态启动时检查元素，我注意到div的{{1}}出现在modal-backdrop的主div内：

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>的底部相比，就像here一样。当我在该链接示例上使用3.3.1时，甚至会发生这种情况。我认为这会导致主body和div拥有修改后的modal-backdrop，而不是z-index，所以我尝试通过添加一行来设置{ {1}}让其父级modal-dialog加上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时，以下CSS将适用于您的.modals：

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

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

当一个关闭时，堆叠模式会滚动主页面

1 个答案: