Twitter引导程序可滚动模式

我正在为我正在处理的项目使用Twitter Bootstrap。

我有一个模态窗口，其中的窗体更长一些，我不喜欢当窗口太小时模态不滚动（如果只是消失在无法滚动的页面上）。

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

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

这完全符合我在Chrome中所需的方式（也就是说，当窗口足够大时，窗体为完整大小，但是随着窗口的缩小，模态窗口会缩小并变得可滚动）。问题是在IE中，模态不在屏幕上。有谁对这个问题有更好的解决方案？

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

谢谢

下面的解决方案如何？它为我工作。试试这个：

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

细节：

1. 从.modal类中移除overflow-y: auto;或移除overflow: auto;（重要）
2. max-height: 400px;从.modal班级删除（重要）
3. 添加max-height: 400px;到.modal .modal-body（或者，可以是420px或更少，但不会超过450px）
4. 添加overflow-y: auto;到.modal .modal-body

完成后，只有身体会滚动。

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

首先，您需要在您的类中添加一个<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，并且具有响应能力。

资源

尝试并覆盖引导程序：

 .modal {
position: fixed;

带有：

.modal {
position: absolute;

它为我工作。

我也加了

.modal { position: absolute; }

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

我知道这在Bootstrap 3中不再是问题，但是在升级之前，我想寻找一个相对较快的修复程序，因此我在使用模式结束之前完成了以上操作并调用了以下命令

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

似乎对FireFox，Chrome，IE10 8和7（我必须使用的浏览器）感到满意

您的模态被隐藏在firefox中，这是因为您在常规样式表中具有负的边距声明：

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

删除负边距，一切正常。

如果使用.modal {overflow-y: auto;}，当主体已经溢出时，将在页面右侧创建附加的滚动条。

造成这种情况的解决办法是删除溢出从身体标记和临时设置模式溢出-Y到汽车。

例：

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

@grenoult的CSS解决方案（大多数情况下确实有效）的问题在于，它可以完全响应，并且当键盘弹出时（即，当他们单击模式对话框中的输入时）在移动设备上，屏幕尺寸会发生变化，而模式对话框的大小更改，它可以隐藏他们刚刚单击的输入，因此他们看不到他们在键入什么。

对我来说更好的解决方案是使用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类的绝对值