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);
        }                                         
    });
 })

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

让我说我在肖像模式上打开模态，它的高度是430px。比我关闭模态我将设备切换到横向并打开模态，它显示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。

Answer 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中的一个演示。

Answer 3

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

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

或者如果您要调整像素

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

根据窗口高度的Bootstrap模态高度

3 个答案: