当一个关闭时,堆叠模式会滚动主页面 [英] Stacking modals scrolls the main page when one is closed
问题描述
当我测试解决方案这里(甚至是这个),在 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屋!