Twitter引导可滚动模式
我正在使用twitter bootstrap为我正在处理的项目。
我有一个模式窗口，它有一个稍长的forms，当窗口太小，模式没有滚动（如果只是从我的页面不能滚动消失）我不喜欢。
为了解决这个问题，我使用了下面的CSS
.modal { overflow-y:auto; max-height:90%; margin-top:-45%; } 这种方式和我想要的Chrome方式完全相同（也就是说，当窗口足够大的时候窗体是全尺寸的，但是当窗口缩小模态缩小并变成可滚动的时候）。 问题是，在IE浏览器模式是closures屏幕。 有没有人有更好的解决这个问题？
我的例子可以在tinyhousemap.com上find（单击导航窗口中的“为地图添加一个条目”以显示模式）
谢谢
下面的解决scheme如何？ 它为我工作。 尝试这个：
.modal .modal-body { max-height: 420px; overflow-y: auto; }
细节：
- 删除
overflow-y: auto;或者overflow: auto;来自.modal类（重要） - 删除
max-height: 400px;来自.modal类（重要） - 添加
max-height: 400px;到.modal .modal-body（或者什么，可以是420px或更less，但是不会超过450px） - 添加
overflow-y: auto;.modal .modal-body
完成，只有身体会滚动。
我只用jQuery做了一个小小的解决scheme。
首先，你需要把一个额外的类放到你的<div class="modal-body">我称之为“ativa-scroll”，所以它变成这样：
<div class="modal-body ativa-scroll">
所以现在就把这段代码放在你的页面上，靠近你的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>
我以完美的方式为我工作，也是一种快速响应的方式！ 🙂
/* Important part */ .modal-dialog{ overflow-y: initial !important } .modal-body{ max-height: calc(100vh - 200px); overflow-y: auto; }
这适用于没有JS代码的Bootstrap 3，并且是响应式的。
资源
尝试并重写bootstrap的：
.modal { position: fixed;
附：
.modal { position: absolute;
它为我工作。
我还补充说
.modal { position: absolute; }
到样式表来允许对话框滚动，但是如果用户已经下移到长页面的底部，则模式可能最终隐藏在可见区域的顶部。
我知道这不再是引导3中的问题，但寻找一个相对较快的解决scheme，直到我们升级，我结束了上述加上打开模式之前调用以下
$('.modal').css('top', $(document).scrollTop() + 50);
似乎很高兴在FireFox，Chrome浏览器，IE10 8和7（我不得不交出的浏览器）
你的模式被隐藏在Firefox中，这是因为你的通用样式表中有负边距声明：
.modal { margin-top: -45%; /* remove this */ max-height: 90%; overflow-y: auto; }
删除负余量，一切正常。
@ grenoult的CSS解决scheme（主要工作）的问题在于它完全响应，当popup键盘时（即，当他们在modal dialog中的input中点击时），屏幕大小改变，modal dialog大小的变化，它可以隐藏他们刚刚点击的input，所以他们看不到他们正在打字。
对我来说更好的解决scheme是使用jQuery，如下所示：
$(".modal-body").css({ "max-height" : $(window).height() - 212, "overflow-y" : "auto" });
它不响应改变窗口的大小，但这并不是经常发生的。
我能够通过在.modal-body元素上使用带“max-height”的“vh”度量来克服这个问题。 70vh看我的用途是正确的。 然后将overflow-y设置为auto，以便只在需要时滚动。
.modal-body { overflow-y: auto; max-height: 70vh; }
这一切都不会按预期的方式工作。正确的方法是改变位置：固定的位置：.modal类的绝对
在使用.modal {overflow-y: auto;}情况下，当body已经溢出时，会在页面的右侧创build额外的滚动条。
解决这个问题的方法是暂时移除body标记的溢出 ，并将模式溢出设置为auto 。
例：
$('.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); });
