根据窗口高度的引导模式高度答案

【问题标题】：Bootstrap modal height as per window height根据窗口高度的引导模式高度
【发布时间】：2015-10-17 07:43:19
【问题描述】：

我正在尝试使模态高度与窗口高度相同。模态框的高度然后是动态的，扩展以适当地适应内容，高达窗口高度的 90%。还想在屏幕顶部留出一些空间来显示标题。

这是我写的：

 $(document).ready(function(){
    $('.modal').on('shown.bs.modal', function (e) {
        var modalObj = $(this).find('.modal-content');                                        
        if ($(modalObj).height() > ($(window).height()*0.8)) {
            $(modalObj).height($(window).height()*0.8);
        }                                         
    });
 })

问题是当我将设备从纵向切换到横向或反之亦然时，第一次尝试模态获取先前模式的高度。

假设我在肖像模式下打开模式，它显示 430 像素的高度。比我关闭模式，我将设备切换到横向并打开模式，它显示 430px（在纵向模式下的高度）但是如果我再次打开模式，它会得到正确的高度。

我认为当我关闭模式时，高度没有被删除。每次关闭模式或调整窗口大小时，我都必须写一些清除高度的东西。

也试过了：

var callback = function () {

  $('.modal').on('shown.bs.modal', function (e) {
        var modalObj = $(this).find('.modal-content');                                      
        if ($(modalObj).height() > ($(window).height()*0.9)) {
            $(modalObj).height($(window).height()*0.9);
        }                                         
    });
};

$(document).ready(callback);
$(window).resize(callback);

【问题讨论】：

您希望模态框为视口高度的 90%？

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

如果你想让 modal 消耗 90% 的视口高度，你不需要任何 JS。 CSS 有一个特殊的单位，叫做vh。 100vh 是视口的 100%。

在你的情况下，你只需要：

.modal {
  height: 90vh;
}

如有必要，您也可以将其更改为max-height。

【讨论】：

这是保持模态容器高度小于窗口宽度的好方法。但如果需要，我必须在运行时计算模态内容高度以应用滚动条。
使用这个：$('.modal').on('hidden.bs.modal', function (e) { $(this).find('.modal-content').height ($(window).height()*0.9); });
再一次，你不需要 JS，我给你的代码和你的 JS 做同样的事情，并随着视口的每次变化而更新。

【解决方案2】：

您的回调函数更改了shown.bs.modal 事件的处理程序。如果您的模式已经打开，则此处理程序已经执行并且不会在窗口调整大小时再次触发。

window.resize 事件需要不同的处理程序。

// This will detect and set the height properly when the modal opens
$('.modal').on('shown.bs.modal', function (e) {
    var modalObj = $(this).find('.modal-content');
    $(modalObj).height('auto');
    if ($(modalObj).height() > ($(window).height() * 0.9)) {
        $(modalObj).height($(window).height() * 0.9);
    }
});

// This will detect and set the height properly when the window resizes
var callback = function () {
    jQuery('.modal').each(function (idx, item) {
        var modalObj = $(item).find('.modal-content');
        $(modalObj).height('auto');
        if ($(modalObj).height() > ($(window).height() * 0.9)) {
            $(modalObj).height($(window).height() * 0.9);
        }
    });
};

// Binding the callback in document.ready is not required, just on window.resize
$(window).resize(callback);

Here 是 Bootply 中的一个演示。

【讨论】：

【解决方案3】：

实际上我们需要对.modal-body 和overflow-y: auto 属性使用高度，而不是.modal。但首先我们需要为.modal-header 和.modal-footer 留出一些空间。因此，我将 75% 用于.modal-body，将 25% 用于.modal-header 和.modal-footer。您可以根据自己的需要进行调整

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

或者如果你想以像素为单位进行调整

.modal-body {
   max-height: calc(100vh - 180px); // to adjust you can change 180px
   overflow-y: auto;
   }

【讨论】：