[jQuery] center popup scroll/resize probs
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 :)