Question

我正在使用twitter bootstrap来处理我正在进行的项目。

我有一个模态窗口，其中有一个更长的形式，我不喜欢当窗口太小时，模态没有滚动（如果只是从我的页面消失了，这是不可滚动的）。

为了解决这个问题，我使用了以下css

.modal {
    overflow-y:auto;
    max-height:90%;
    margin-top:-45%;
}

这完全按照我想要的方式在Chrome中工作（也就是说，当窗口足够大时窗体是完整大小，但随着窗口缩小模态收缩并变得可滚动）。问题是在IE中，模态不在屏幕上。有没有人能更好地解决这个问题？

我的例子可以在tinyhousemap.com上找到（点击导航窗口中的“在地图上添加条目”以显示模式）

由于

Answer 1

以下解决方案如何？它对我有用。试试这个：

.modal .modal-body {
    max-height: 420px;
    overflow-y: auto;
}

详细说明：

从.modal类（重要）

overflow-y: auto;

overflow: auto;

从max-height: 400px;班级（重要）

.modal

将max-height: 400px;添加到.modal .modal-body（或者可以是420px或更少，但不会超过450px）
将overflow-y: auto;添加到.modal .modal-body

完成，只有身体会滚动。

Answer 2

我只使用jQuery做了一个小小的解决方案。

首先，你需要在你的<div class="modal-body">中添加一个名为“ativa-scroll”的类，所以它变成了这样：

<div class="modal-body ativa-scroll">

所以现在把这段代码放在你的页面上，靠近你的JS loading：

<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>

我也很适合我，也是以敏感的方式！：）

Answer 3

/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

这适用于没有JS代码的Bootstrap 3，并且响应迅速。

Source

Answer 4

尝试并覆盖bootstrap：

 .modal {
position: fixed;

使用：

.modal {
position: absolute;

它对我有用。

Answer 5

我还添加了

.modal { position: absolute; }

到样式表以允许对话框滚动，但如果用户向下移动到长页面的底部，则模态最终会隐藏在可见区域的顶部。

我知道这不再是bootstrap 3中的一个问题，但是在我们升级之前寻找一个相对快速的解决方案我最终得到了以上加上在打开模态之前调用以下内容

$('.modal').css('top', $(document).scrollTop() + 50);

似乎很高兴FireFox，Chrome，IE10 8＆amp; 7（我不得不提供的浏览器）

Answer 6

你的模态隐藏在firefox中，这是因为你在通用样式表中有一个负边距声明：

.modal {
    margin-top: -45%; /* remove this */
    max-height: 90%;
    overflow-y: auto;
}

删除负边距，一切正常。

Answer 7

如果使用.modal {overflow-y: auto;}，当 body 已经溢出时，会在页面右侧创建额外的滚动条。

解决此问题的方法是暂时从 body 标记中删除 overflow ，并将模态 overflow-y 设置为 auto < / em>的

实施例

$('.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); });

Answer 8

@ grenoult的CSS解决方案（主要是可行的）的问题在于，当键盘弹出时（即当他们点击模态对话框中的输入时）它完全响应并且在移动设备上，屏幕尺寸发生变化，模态对话框的大小发生变化，它可以隐藏他们刚刚点击的输入，这样他们就无法看到他们输入的内容。

对我来说更好的解决方案是使用jquery如下：

$(".modal-body").css({ "max-height" : $(window).height() - 212, "overflow-y" : "auto" });

它无法响应更改窗口大小，但这种情况通常不会发生。

Answer 9

我能够通过使用＆＃34; vh＆＃34;来克服这个问题。在.modal-body元素上具有max-height的度量。 70vh看起来适合我的用途。然后将overflow-y设置为auto，这样它只在需要时滚动。

.modal-body {
   overflow-y: auto;
   max-height: 70vh;
}

Answer 10

这些都不会按预期工作。正确的方法是改变位置：固定到位置：绝对为.modal类

Twitter引导可滚动模式

10 个答案:

实施例