Bootstrap modal height as per window height

Question

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

Answer 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.

Answer 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.