根据窗口高度引导模态高度

Question

我试图使模态高度与窗口高度相同。模态的高度是动态的，可以适当地扩展以适应内容，最多可达窗口高度的 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);

Answer 1

如果您希望模态占用视口高度的 90%，则不需要任何 JS。CSS 有一个特殊的单位，称为vh. 100vh是视口的 100%。

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

.modal {
  height: 90vh;
}

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