title: Bootstrap modal height as per window height
body: <p>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.</p>
  
  <p>This is what i have written:</p>
  
  <pre><code> $(document).ready(function(){
      $('.modal').on('shown.bs.modal', function (e) {
          var modalObj = $(this).find('.modal-content');                                        
          if ($(modalObj).height() &gt; ($(window).height()*0.8)) {
              $(modalObj).height($(window).height()*0.8);
          }                                         
      });
   })
  </code></pre>
  
  <p>Problem is when i switch the device from portrait to landscape or vice versa, on the first attempt modal gets height of previous mode. </p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Also tried:</p>
  
  <pre><code>var callback = function () {
  
    $('.modal').on('shown.bs.modal', function (e) {
          var modalObj = $(this).find('.modal-content');                                      
          if ($(modalObj).height() &gt; ($(window).height()*0.9)) {
              $(modalObj).height($(window).height()*0.9);
          }                                         
      });
  };
  
  $(document).ready(callback);
  $(window).resize(callback);
  </code></pre>