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

Question

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

当我在这里(甚至是这个)测试解决方案时,通过向body个人添加文本modals(通过Firefox的"编辑为HTML"来测试滚动),它具有我需要的特性.

当我尝试使用最新的jQuery和Bootstrap时出现的问题是,modal-backdrop然后显示在上面modal-dialog.在检查元素,只要一个或多个模态都在涨,我注意到,div在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>

相比于底部body就像是在这里.当我在该链接示例上使用3.3.1时,甚至会发生这种情况.我认为这导致了主要div和modal-backdrop修改z-index,但不是modal-dialog,所以我试图通过添加一行来设置modal-dialog它的父母z-index加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该类.