title: modal pop up window to fit within browser view if resize height
body: <p>I've went to this tutorial to do a modal pop up window, and it seems pretty nice for what I need to do. However, I was wondering if someone can help me figure out what I need to calculate to change the dialog box so it'll follow whenever you resize the browser. This tutorial is good because if you resize the browser (width-wise), the box will follow and go into the middle. But if it is height-wise, it wont.</p>
  
  <p>Tutorial : <a href="http://www.queness.com/post/1696/create-a-beautiful-looking-custom-dialog-box-with-jquery-and-css3" rel="nofollow">Here</a></p>
  
  <p>I'm thinking it has to do with these codes :</p>
  
  <pre><code>    // get the screen height and width  
  var maskHeight = $(document).height();  
  var maskWidth = $(window).width();
  
  // calculate the values for center alignment
  var dialogTop =  (maskHeight/3) - ($('#dialog-box').height()/3);  
  var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2); 
  
  // assign values to the overlay and dialog box
  $('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();
  $('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();
  </code></pre>
  
  <p>I've tried to use $(window).height() but I don't think that works either. I tried to mimic the width styles because that one works, but it doesn't seem to work with height? Can someone help me with this?</p>
  
  <p>Thank you!</p>