CSS Twitter 引导程序可滚动模式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9899676/
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
Twitter bootstrap scrollable modal
提问by Dan dot net
I'm using twitter bootstrap for a project I am working on.
我正在为我正在从事的项目使用 twitter bootstrap。
I have a modal window that has a somewhat longer form in it and I didn't like that when the window got too small the modal didn't scroll (if just disappeared off my page which isn't scrollable).
我有一个模态窗口，它有一个更长的形式，我不喜欢当窗口太小时模态没有滚动（如果只是从我的页面上消失了，这是不可滚动的）。
To fix this I used the following css
为了解决这个问题，我使用了以下 css
.modal {
overflow-y:auto;
max-height:90%;
margin-top:-45%;
}
This works exactly the way I want it to in Chrome (that is, the form is full size when the window is big enough, but as the window shrinks the modal shrinks and becomes scrollable). The problem is that in IE the modal is off the screen. Does anyone have a better solution to this problem?
这完全符合我在 Chrome 中想要的方式（也就是说，当窗口足够大时，表单是全尺寸的，但随着窗口缩小，模态缩小并变得可滚动）。问题是在 IE 中，模态不在屏幕上。有没有人对这个问题有更好的解决方案？
My example can be found at tinyhousemap.com (click 'Add an Entry to the map' in the navigation window for the modal to appear)
我的示例可以在 tinyhousemap.com 找到（单击导航窗口中的“向地图添加条目”以显示模式）
Thanks
谢谢
回答by Lijana Saniukaite
How about the below solution? It worked for me. Try this:
下面的解决方案怎么样？它对我有用。尝试这个：
.modal .modal-body {
max-height: 420px;
overflow-y: auto;
}
Details:
细节：
- remove
overflow-y: auto;oroverflow: auto;from .modal class (important) - remove
max-height: 400px;from.modalclass (important) - Add
max-height: 400px;to .modal .modal-body (or what ever, can be420pxor less, but would not go more than450px) - Add
overflow-y: auto;to.modal .modal-body
- 删除
overflow-y: auto;或overflow: auto;从 .modal 类（重要） max-height: 400px;从.modal课堂上删除（重要）- 添加
max-height: 400px;到 .modal .modal-body （或任何东西，可以是420px或更少，但不会超过450px） - 添加
overflow-y: auto;到.modal .modal-body
Done, only body will scroll.
完成，只有身体会滚动。
回答by Massa
I′ve done a tiny solution using only jQuery.
我只使用 jQuery 做了一个小解决方案。
First, you need to put an additional class to your <div class="modal-body">I called "ativa-scroll", so it becomes something like this:
首先，你需要在你的<div class="modal-body">I 中添加一个名为“ativa-scroll”的额外类，所以它变成了这样：
<div class="modal-body ativa-scroll">
<div class="modal-body ativa-scroll">
So now just put this piece of code on your page, near your JS loading:
所以现在把这段代码放在你的页面上，靠近你的 JS 加载：
<script type="text/javascript">
$(document).ready(ajustamodal);
$(window).resize(ajustamodal);
function ajustamodal() {
var altura = $(window).height() - 155; //value corresponding to the modal heading + footer
$(".ativa-scroll").css({"height":altura,"overflow-y":"auto"});
}
</script>
I works perfectly for me, also in a responsive way! :)
我非常适合我，也以响应的方式工作！:)
回答by Guillaume Renoult
回答by Dan Baker
Try and override bootstrap's:
尝试覆盖引导程序：
.modal {
position: fixed;
With:
和：
.modal {
position: absolute;
It worked for me.
它对我有用。
回答by abs
I also added
我还加了
.modal { position: absolute; }
to the stylesheet to allow the dialog to scroll, but if the user has moved down to the bottom of a long page the modal can end up hidden off the top of the visible area.
到样式表以允许对话框滚动，但如果用户向下移动到长页面的底部，模态可能最终隐藏在可见区域的顶部。
I understand this is no longer an issue in bootstrap 3, but looking for a relatively quick fix until we upgrade I ended up with the above plus calling the following before opening the modal
我知道这不再是引导程序 3 中的问题，但是在我们升级之前寻找相对快速的修复我最终得到了上面的内容，并在打开模态之前调用了以下内容
$('.modal').css('top', $(document).scrollTop() + 50);
Seems to be happy in FireFox, Chrome, IE10 8 & 7 (the browsers I had to hand)
在 FireFox、Chrome、IE10 8 和 7（我不得不使用的浏览器）中似乎很开心
回答by Ilia Rostovtsev
In case of using .modal {overflow-y: auto;}, would create additional scroll bar on the right of the page, when bodyis already overflowed.
在使用的情况下.modal {overflow-y: auto;}，当正文已经溢出时，将在页面右侧创建额外的滚动条。
The work around for this is to remove overflowfrom the bodytag temporarily and set modal overflow-yto auto.
解决这个问题的方法是暂时从body标签中删除溢出并将模态溢出-y设置为auto。
Example:
例子：
$('.myModalSelector').on('show.bs.modal', function () {
// Store initial body overflow value
_initial_body_overflow = $('body').css('overflow');
// Let modal be scrollable
$(this).css('overflow-y', 'auto');
$('body').css('overflow', 'hidden');
}).on('hide.bs.modal', function () {
// Reverse previous initialization
$(this).css('overflow-y', 'hidden');
$('body').css('overflow', _initial_body_overflow);
});
回答by Andres Ilich
Your modal is being hidden in firefox, and that is because of the negative margin declaration you have inside your general stylesheet:
您的模态被隐藏在 Firefox 中，这是因为您在常规样式表中有负边距声明：
.modal {
margin-top: -45%; /* remove this */
max-height: 90%;
overflow-y: auto;
}
Remove the negative margin and everything works just fine.
删除负边距，一切正常。
回答by dbryson
The problem with @grenoult's CSS solution (which does work, mostly), is that it is fully responsive and on mobile when the keyboard pops up (i.e. when they click in an input in the modal dialog) the screen size changes and the modal dialog's size changes and it can hide the input they just clicked on so they can't see what they are typing.
@grenoult 的 CSS 解决方案（大多数情况下确实有效）的问题在于，当键盘弹出时（即当他们在模态对话框中单击输入时），它是完全响应的，并且在移动设备上，屏幕大小发生变化，模态对话框的大小改变，它可以隐藏他们刚刚点击的输入，这样他们就看不到他们正在输入的内容。
The better solution for me was to use jquery as follows:
对我来说更好的解决方案是使用 jquery，如下所示：
$(".modal-body").css({ "max-height" : $(window).height() - 212, "overflow-y" : "auto" });
It isn't responsive to changing the window size, but that doesn't happen that often anyway.
它对更改窗口大小没有响应，但无论如何这种情况不会经常发生。
回答by Keith.Abramo
I was able to overcome this by using the "vh" metric with max-height on the .modal-body element. 70vh looked about right for my uses. Then set the overflow-y to auto so it only scrolls when needed.
我能够通过在 .modal-body 元素上使用具有 max-height 的“vh”度量来克服这个问题。70vh 看起来很适合我的用途。然后将 overflow-y 设置为 auto 以便它仅在需要时滚动。
.modal-body {
overflow-y: auto;
max-height: 70vh;
}
回答by GravyPlaya
None of this will work as expected.. The correct way is to change position: fixed to position: absolute for .modal class
这些都不会按预期工作..正确的方法是改变 position: fixed to position: absolute .modal 类
