Question

我使用的是Bootstrap 3和标准的Bootstrap模式。在Firebug中查看这样的模态会显示默认宽度为600px（我当前屏幕上的全屏视图），但我没有看到默认高度。

有没有办法在Javascript / jQuery中检测到这个，还是可以根据当前窗口高度来计算？

我需要这个来计算响应页面上使用的模态内的动态内容的最大高度，以避免它溢出模态。在JS中，我可以使用$(window).height()获取当前窗口高度+我可以在页面加载或使用$(window).resize()调整页面大小时重新计算此值，因此我只想知道如何获得模态高度。

在Firebug中，默认情况下，模态使用4个相关的div与以下类，所以我猜有问题的div将是第一个或第二个类：＆＃34; modal＆＃34;，＆＃34; modal-dialog＆＃34;，＆＃34; modal-content＆＃34;，＆＃34; modal-body＆＃34;

有人知道如何实现这个目标吗？

非常感谢蒂姆。

Answer 1

bootstrap3模式的想法是模态高度将根据您放入其中的任何内容进行调整，即使它高于视口，因此唯一的滚动条将是视口的滚动条。这是一个更适合移动设备：

http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/

（向下滚动到＆＃39;模式更具响应性＆＃39;）

你可以通过添加如下规则来覆盖它并设置你的模态高度：

.modal-body {
  height: 200px;
  overflow: auto;
}

因此，如果你想控制你的动态内容，并且你希望你的模态与窗口的高度相同，那么你可以选择或采取正确的行：

测量窗口高度，如您所述
使用jQuery .css（）在.modal-body上设置两个CSS规则，一个将其高度设置为比窗口高度小约200px，另一个设置为overflow：auto

示例：

 var h = parseInt($(window).height()) - 200;
 $(".modal-body").css({height: h + 'px', overflow: 'auto'});

如果您使用的话，您希望为.modal-header和.modal-footer留出200px的空间。如果没有，没问题，你可以调整200px直到找到效果很好的东西 - 我认为你总是需要.modal-body的高度比窗口小一点，以允许边框还有一点UX间距等等。

现在，您可以将动态内容的最大高度设置为应用于.modal-body的高度。

Bootstrap 3：如何检测当前/默认模态高度

1 个答案: