Question

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.

Here's the code I have currently:

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

 }

Option I coded for the effect I was after:

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

 }

No correct solution

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top