javascript - 根据窗口高度 Bootstrap 模态高度

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 像素的高度。然后我关闭模态我将设备切换到横向并打开模态，它显示 430 像素(纵向模式下的高度)但是如果我再次打开模态，它会得到正确的高度。

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

还试过:

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

如果你想让模态占据视口(viewport)高度的 90%，你不需要任何 JS。 CSS 有一个特殊的单元，称为 vh。 100vh 是视口(viewport)的 100%。

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

.modal {
  height: 90vh;
}

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