Bootstrap 可滚动模式

我在用 Bootstrap 做我正在做的一个项目。

我有一个模态窗口，它有一个比较长的形式，我不喜欢，当窗口变得太小，模态没有滚动(如果只是消失了我的页面，这是不可滚动的)。

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

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

这正是我希望它在 Chrome 中的工作方式(也就是说，当窗口足够大时，表单是全尺寸的，但是当窗口缩小时，模态就会缩小，变成可滚动的)。问题是在 IE 中，模态不在屏幕上。有人有更好的办法解决这个问题吗？

我的示例可以在 tinyhousemap.com 中找到(在导航窗口中单击“添加地图条目”以显示模态)

谢谢

154417 次浏览
小开

您的模态被隐藏在 firefox 中，这是因为您在常规样式表中使用了负边距声明:

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

去掉负边距，一切都很正常。

小开

下面的方法怎么样? 对我很有效。试试这个:

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

详情:

  1. 从模式类中删除 overflow-y: auto;或 overflow: auto;(重要)
  2. 从 .modal类中删除 max-height: 400px;(重要)
  3. 将 max-height: 400px;添加到. modal.modal- 主体(或任何东西，可以是 420px或更少，但不会超过 450px)
  4. 将 overflow-y: auto;添加到 .modal .modal-body

完成，只有身体会滚动。

小开

None of this will work as expected.. The correct way is to change position: fixed to position: absolute for .modal class

小开

尝试覆盖引导程序的:

 .modal {
position: fixed;

配合:

.modal {
position: absolute;

这招对我很管用。

小开

我还加了

.modal { position: absolute; }

但是如果用户已经移动到一个长页面的底部，模态可能会隐藏在可见区域的顶部。

我明白这不再是一个问题引导3，但寻找一个相对快速的修复，直到我们升级我结束了上述加上调用以下在打开模式

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

似乎在 FireFox，Chrome，IE108和7(我不得不使用的浏览器)中感到很高兴

小开

我只使用 jQuery 完成了一个很小的解决方案。

首先，你需要给你的 <div class="modal-body">增加一个类，我称之为“ ativa-roll”，所以它会变成这样:

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

我为自己完美地工作，也以一种响应的方式! :)

小开

在使用 .modal {overflow-y: 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);
});
小开 
/* Important part */
.modal-dialog{
overflow-y: initial !important
}
.modal-body{
max-height: calc(100vh - 200px);
overflow-y: auto;
}

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

来源

小开

@ Grenoult 的 CSS 解决方案(大多数情况下确实有效)的问题在于，当键盘弹出时(例如，当他们在模态对话框中点击输入时) ，它是完全响应和移动的，屏幕大小变化，模态对话框的大小变化，它可以隐藏他们刚刚点击的输入，所以他们看不到他们正在输入什么。

对我来说，更好的解决方案是使用 jquery，如下所示:

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

它对改变窗口大小没有反应，但是这种情况并不经常发生。

小开

我能够克服这一点，使用“ vh”度量与最大高度。模态-体元件模态-体元件。70vh 看起来很适合我使用。然后将 overflow-y 设置为 auto，以便它只在需要时滚动。

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

提交答案