Question

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 is a CSS solution to the problem.

I have a div called “popup” with the following CSS:

#popup {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;}

It covers the screen like a overlay… Inside this div i have another called #pnlEditOverlay that is a box that has a notification message or a edit form or something similar.

pnlEditOverlay is what i am trying to center vertically on the page

I use jQuery to expand the height of #popup to the document height, so that it covers everything:

$("#popup").css('height', $(document).height());

My issue is that i would like to vertically center #pnlEditOverlay on the page even if the page is large enough where it can be scrolled.

I have been using jQuery to reposition this div:

var offset = $("#pnlEditOverlay").offset();

        var topPadding = 75;
        $(window).scroll(function () {
            if ($(window).scrollTop() > offset.top) {
                $("#pnlEditOverlay").stop().animate({
                    marginTop: $(window).scrollTop() - offset.top + topPadding
                });
            } else {
                $("#pnlEditOverlay").stop().animate({
                    marginTop: 75
                });
            };
        }).scroll();

However this is not exactly what i want. It only repositions when the page is scrolled… So when the user is already scrolled halfway down the page, the div is hidden until they scroll…

In any case. I was wondering if there is a elegant CSS solutions to this. I simple want to put a box dead center on the page, even if the page is scrolled. I’m OK with using jQuery to set the styles of the div, however i would like to avoid implement a click event as there are MANY MANY buttons that could cause the div to be shown.

So the questions is, is there a CSS style or a small piece of jQuery that will center a div vertically and keep it there even if the page is scrolled?

Thanks

Answer 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.