jQuery popup box height positioning relative to page position
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