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

参见英文答案 > Multiple modals overlay 25个

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

当我测试解决方案 here (甚至 this one )时,通过向正文和单个模态添加文本(通过Firefox的“编辑为HTML”来测试滚动),它具有我需要的特性.

当我使用最新的jQuery和Bootstrap尝试它时出现的问题是模态背景然后显示在模态对话框之上.每当一个或多个模态启动时检查元素,我注意到模态背景的div出现在模态的主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>

与身体的底部相比,就像它是 here .这甚至发生在我在该链接示例上使用3.3.1时.我认为这导致主div和模态背景具有修改的z-index,但不是模态对话框,所以我尝试通过添加一行来设置模态对话框以使其父级的z-index加上来修复它它将背景放在适当的位置,但滚动问题仍然存在.这是因为3.3.1的变化还是我看错了解决方案？

Backdrop’s not the problem. Not being able to scroll through shown modals if the top one is closed is.

您应该添加以下Javascript：

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

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

当主体具有类模态打开时,以下CSS将应用于您的.modals：

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

关闭模态也会从模态中删除模态打开类.