Question

I’m using a jQuery popup window and just wondered how to make the box stay centered when I change my browser windows width, currently it gets the center point on page load and stay in that position when I change the width.

Here’s the code I using for the popup function:

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

 }  

Answer 1

A JavaScript solution is to use window.onresize which is triggered whenever anything happens to the size of the window.

window.onresize = function() {
    var maskWidth = $(window).width();
    var dialogLeft = (maskWidth/2) - ($('#dialog-box').width())/2; 
    $('#dialog-box').css({top:80, left:dialogLeft});
}

Probably best to put the inner code into a function to save duplicating it.