Centering A Div On Screen Even When The Page Is Scrollable

There has to be a easy solution to this. I have been trying to work with jQuery to accomplish the effect i am looking for but, it just isn't quite working... Also i suspect there i

Solution 1:

There is indeed a simple CSS solution for this. Firstly, use this for popup:

#popup
{
position:fixed;
height:100%;
width:100%;
}

and this for your overlay:

#overlay
{
position:fixed;
top:50%;
left:50%;
margin-top:-y;
margin-left:-x;
}

where x and y are half the width and height of your overlay div respectively. So you'd need to know the height and width of this div.

This will take care of all your problems, even when the page will be scrolled.

Solution 2:

You need to account for the window's initial scroll offset when you open the popup. Instead of leaving it with a top position of absolute 0, you need to use Javascript to reposition it to the current value of the window's topmost visible pixel. I believe this is the offsetHeight parameter but I haven't tested.

Also FWIW, isn't there a "modal dialog" option in Jquery which does what you're expecting, out of the box? Did that not work for some reason?