[jQuery] center popup scroll/resize probs

[Daniel Donaldson]

So I have a modal popup that is working fairly well, but I have some
issues in IE/FF (the only browsers I've tested in so far).

One thing is that the popup won't recenter if the browser is resized.

The other prob is a bit more difficult to replicate, but I've noticed
if my browser window is sized so that I can fit all the bottom of the
top row in the screen, but am otherwise scrolled down to the bottom,
and then when I click on 1 of the top row items the popup opens with
only the bottom half in the viewport.

There are more instances of this type of behavior if I play around
with scrolling and clicking on items of different distances from the
scroll direction. But again, this is hard to predictably replicate,
but occurs fairly often.

So, essentially, I would like the popup in the center of the viewable
area, no matter what.

Is this possible?

You can see it here:
http://development.aquatictraininginstitute.com/schedule/schedule.html

Any of the divs that change background on hover will produce the popup
on click.

The relevant code is here:

//centering popup
function centerPopup(){
        //request data for centering
        var windowWidth = document.documentElement.clientWidth;
        var windowHeight = document.documentElement.clientHeight;
        var popupHeight = $("#popupContact").height();
        var popupWidth = $("#popupContact").width();
        var mypopup = $("#popupContact");
        //centering
        $("#popupContact").css({
                "position": "absolute",
                "top": windowHeight/2-popupHeight/2,
                "left": windowWidth/2-popupWidth/2
        });
        //only need force for IE6

        $("#backgroundPopup").css({
                "height": windowHeight
        });


}

Thank you for taking the time to look at this :)