Bootstrap modal height as per window height

问题

I am trying to make modal height same as window height. The height of the modal is then dynamic, expanding to fit the content appropriately, up to 90% of the window height. Also want to left out some space top of the screen to show the header.

This is what i have written:

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

Problem is when i switch the device from portrait to landscape or vice versa, on the first attempt modal gets height of previous mode.

Lets say i open the modal on portait mode and it is shwoing 430px of height. Than i closed the modal i switch the device to landscape and open the modal, it shows 430px(height that were coming on portait mode) but if i again open the modal, it gets the correct height.

I think when i close the modal the height didn't get remove. I have to write something that clear the height every time i close the modal or resize the window.

Also tried:

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

回答1:

If you want the modal to consume 90% of the viewport height, you don't need any JS. CSS has a special unit for that called vh. 100vh is 100% of the viewport.

In your case, you'll just need:

.modal {
  height: 90vh;
}

You can also change it to max-height if necessary.

回答2:

Your callback function changes the handler for the shown.bs.modal event. If your modal is already open this handler has already been executed and will not trigger again in window resize.

You need a different handler for the window.resize event.

// 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 is a demo in Bootply.

回答3:

Actually we need to use height to .modal-body along with overflow-y: auto property, not to .modal. But first we need to leave some space for .modal-header and .modal-footer. So, I am using 75% for .modal-body and 25% leaving for .modal-header and .modal-footer. You can adjust it as per your needs

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

Or if you want to adjust in pixels

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

来源：https://stackoverflow.com/questions/33184157/bootstrap-modal-height-as-per-window-height