当一个关闭时，堆叠模式会滚动主页面 [英] Stacking modals scrolls the main page when one is closed

问题描述

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

当我测试解决方案这里（甚至是这个），在 body 和单独的 modals （通过Firefox的Edit as HTML来测试滚动），它具有我需要的特性。

当我使用最新的jQuery和Bootstrap尝试它时发生的一个问题是， modal-backdrop 然后显示在模态对话框之上。每当有一个或多个模块启动时，在检查元素时，我注意到 div 为模式背景出现在模态的主要 div 中：

 < div id =myModalclass =modal fadearia-hidden =truestyle =display：none;> 
 
< div class =modal-dialog modal-lg>< / div> 
< / div> 
  

与 body 的底部相比此处。当我在该链接的例子中使用3.3.1时，甚至发生这种情况。我认为这导致了主要 div 和 modal-backdrop 修改了 z-index ，但不是模式对话框，所以我试着通过添加一行来设置模式对话框使其父母的 z-index 加1.它将背景放在适当的位置，但滚动问题仍然存在。这是因为3.3.1的变化，还是我看到了错误的解决方案？

解决方案

背景不是问题。

您应该添加以下Javascript：

$（$'$ $ $ $ $ $ $ $ $ $ $''$'$'$''。'''。''。'（'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; 
 
  

关闭模式将删除模态打开 class from the modal。

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?

When I tested the solution here (and even this one) by adding text to the body and individual modals (through Firefox's "Edit as HTML" to test scrolling) and it had the characteristics that I needed.

A problem that occurred when I tried it with the latest jQuery and Bootstrap was that the modal-backdrop then shows above the modal-dialog. Upon Inspect Element whenever one or more modals are up, I noticed that the div for the modal-backdrop appears within the main div of the 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 body like it is here. This even happens when I use 3.3.1 on that linked example. I think this resulted in the main div and modal-backdrop having the modified z-index, but not the modal-dialog, so I tried to fix it by adding a line to set the modal-dialog to have its parent's z-index plus 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?

解决方案

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:

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

demo: http://jsfiddle.net/u038t9L0/1/

When the body has class modal-open the following CSS will be applied for your .modals:

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

Closing the modal will remove the modal-open class from the modal too.

这篇关于当一个关闭时，堆叠模式会滚动主页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！