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

细节:

  1. 删除overflow-y: auto; 或者overflow: auto; 来自.modal类(重要)
  2. 删除max-height: 400px; 来自.modal类(重要)
  3. 添加max-height: 400px; 到.modal .modal-body(或者什么,可以是420px或更less,但是不会超过450px
  4. 添加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); });