views:

678

answers:

3

Hello on and all. I am developing a model box jQuery plugin, and I need to know how to get some window properties.

The box and its shader div fade over top of the page, and the shader div covers the complete body, not just the window (Important for pages that have horizontal scroll bars). When the model div fades in, it centers itself horizontally and vertically based on the window. However, this won't work if the user scrolled down the page some ( the box will be at the top of the page since it centers based on the window size alone).

Is there a way to get the window top and left position relative to the body.
For example, the user has scrolled down the page and clicked whatever to open the model box, what can I do to get the number of pixels the top of the window is down from the top of the body.

+2  A: 

Unless I'm misunderstanding the question I think you are just looking for

$(window).scrollTop()
Bela
Thank you, didn't know jQuery had a css function to get that (why one should always check the documentation thoroughly)
Robert DeBoer
+1  A: 

This should do it:

document.documentElement.scrollTop || document.body.scrollTop;
document.documentElement.scrollLeft || document.body.scrollLeft;
kangax
A: 

for the overlay you can do

.ModalOverlay
{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

and you just show or hide it.

Funky Dude
The overlay wasn't the problem, it was centering the actual model box in the browser window. The overlay and model box are two seperate divs; the model box is 1 zindex higher than the overlay.
Robert DeBoer