javascript 堆叠模态在关闭时滚动主页
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27371918/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stacking modals scrolls the main page when one is closed
提问by maki57
With Bootstrap 3.3.1, I was able to get stacking modals without any additional scripts (as in copy-pasting the modal templates in the Bootstrap site and making many of them in the same page). The problem was that whenever the top (highest) modal is closed, scrolling focus goes to the main page (under all remaining modals) and goes back to the top modal only if a new modal is opened. Is there a way to set the scrolling focus to the next modal and not the main page?
使用 Bootstrap 3.3.1，我能够在没有任何额外脚本的情况下获得堆叠模态（就像在 Bootstrap 站点中复制粘贴模态模板并将其中的许多模板放在同一页面中一样）。问题是，只要顶部（最高）模态关闭，滚动焦点就会转到主页（在所有剩余模态下），只有在打开新模态时才返回顶部模态。有没有办法将滚动焦点设置到下一个模式而不是主页？
When I tested the solution here(and even this one) by adding text to the bodyand individual modals(through Firefox's "Edit as HTML" to test scrolling) and it had the characteristics that I needed.
当我通过向和 个人添加文本（通过 Firefox 的“编辑为 HTML”来测试滚动）来测试这里（甚至是这个）的解决方案时，它具有我需要的特性。bodymodals
A problem that occurred when I tried it with the latest jQuery and Bootstrap was that the modal-backdropthen shows above the modal-dialog. Upon Inspect Elementwhenever one or more modals are up, I noticed that the divfor the modal-backdropappears within the main divof the modal:
当我使用最新的 jQuery 和 Bootstrap 尝试它时出现的一个问题是modal-backdropthen 显示在modal-dialog. 在Inspect Element每当一个或多个模态启动时，我注意到divformodal-backdrop出现在 的 maindiv中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>
as compared to the bottom of bodylike it is here. This even happens when I use 3.3.1 on that linked example. I think this resulted in the main divand modal-backdrophaving the modified z-index, but not the modal-dialog, so I tried to fix it by adding a line to set the modal-dialogto have its parent's z-indexplus 1. It put the backdrops in their proper place, but the scrolling problem persists. Is this because of a change in 3.3.1 or was I looking at the wrong solution?
相比之下，body就像是这里一样。当我在该链接示例上使用 3.3.1 时，甚至会发生这种情况。我认为这导致了 maindiv并modal-backdrop修改了z-index，但没有修改，modal-dialog所以我尝试通过添加一行来修复它，将其设置modal-dialog为具有其父级的z-index加 1。它将背景放在适当的位置，但滚动问题仍然存在. 这是因为 3.3.1 中的更改还是我查看了错误的解决方案？
回答by Bass Jobsen
Backdrop's not the problem. Not being able to scroll through shown modals if the top one is closed is.
背景不是问题。如果顶部关闭，则无法滚动显示的模态。
You should add the following Javascript:
您应该添加以下 Javascript：
$('.modal').on('hidden.bs.modal', function (e) {
if($('.modal').hasClass('in')) {
$('body').addClass('modal-open');
}
});
demo: http://jsfiddle.net/u038t9L0/1/
演示：http: //jsfiddle.net/u038t9L0/1/
When the body has class modal-openthe following CSS will be applied for your .modals:
当 body 有 class 时modal-open，以下 CSS 将应用于您的.modals：
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
Closing the modal will remove the modal-openclass from the modal too.
关闭模态也会modal-open从模态中删除类。
