title: jQuery popup box height positioning relative to page position
body: <p>I currently have a pop of box that appears when clicking a link. The issue I'm having is that the link is about half way down the page and when I click the link the overlay height isn't 100% and the box appears 80px down from the top of the page. I somehow want to make the box overlay height 100% no matter what size i make the page (same as my width works) and have box so its 80px from the top of the screen relative to what I can see on the page at that point rather than when the page was first loaded.</p>
  
  <p>Here's the code I have currently:</p>
  
  <pre><code>      //Popup dialog
        function popup(message) {
  
       // get the screen height and width  
       var maskHeight = $(document).height();  
       var maskWidth = $(window).width();
  
       // calculate the values for center alignment    
       var dialogLeft = (maskWidth/2) - ($('#dialog-box').width())/2; 
  
       // Set overlay to fill screen
       $("#dialog-overlay").css("width","100%").fadeIn();
  
       // Set dialogue box 80px from top and central
       $('#dialog-box').css({top:80, left:dialogLeft}).fadeIn();
  
       // display the message
       //$('#dialog-message').html(message);
  
       // Close button fades out overlay and message  
       $('.button').live('click',function()
       {
      $(this).parent().fadeOut();
      $('#dialog-overlay').fadeOut();
      return false;
       });
  
       window.onresize = function() {
       var maskWidth = $(window).width();
            var dialogLeft = (maskWidth/2) - ($('#dialog-box').width())/2; 
       $('#dialog-box').css({top:80, left:dialogLeft});
       }
  
   }
  </code></pre>
  
  <p>Option I coded for the effect I was after:</p>
  
  <pre><code> //Popup about location box
   function popup(message) {
  
  // get the screen height and width  
  var maskHeight = $(document).height();  
  var maskWidth = $(window).width();
  
  // calculate the values for center alignment     
  var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2); 
  var dialogTop = (maskHeight/2) - ($('#dialog-box').height()/2);
  
  // Set overlay to fill screen
  $("#dialog-overlay").css("width","100%").fadeIn();
  $("#dialog-overlay").css("height",maskHeight).fadeIn();
  
  // Set dialogue box 80px from top and central
  $('html, body').animate({ scrollTop: 0 }, 500);
  $('#dialog-box').css({top:80, left:dialogLeft}).delay(500).fadeIn();
  
  // display the message
  //$('#dialog-message').html(message);
  
  // Close button fades out overlay and message   
  $('.button').live('click',function()
  {
      $(this).parent().fadeOut();
      $('#dialog-overlay').fadeOut();
      return false;
  });
  
  window.onresize = function() {
       var maskWidth = $(window).width();
       var dialogLeft = (maskWidth/2) - ($('#dialog-box').width())/2; 
       $('#dialog-box').css({top:80, left:dialogLeft});
  }
  
   }
  </code></pre>