Question

30

position an overlay in the center of the page with jquery

rated 0 times [ 34] [ 4] / answers: 1 / hits: 26011 / 14 Years ago, sun, february 20, 2011, 12:00:00

This should be a simple question, but I can't seem to figure it out. I made a popup using jquery, and I want it positioned in the center of the page. No matter how the site is adjusted and the resolution. Right now I'm just positioning it absolutely with CSS but the problem with that is that if you move the page around it doesn't move the overlay and it depends on how much content is on the page. Is there a way to position it with jquery so it will also be in the center of the window?

Thanks!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

gerardamosy

Add To Favorites

Follow

Total Points: 600

Total Questions: 116

Total Answers: 102

Location: Ukraine

Member since Tue, May 30, 2023

1 Year ago

answered 14 Years ago kennedysaraiw · Accepted Answer

You do not need jQuery for this. If the purpose is to always have the div in the center of the window, then you can do it with CSS.

Check working example at http://jsfiddle.net/5Q6FU/

<div class=mydiv></div>



.mydiv{

    width:300px;

    height:300px;

    background:red;

    position:fixed;

    top:50%;

    left:50%;

    margin-top:-150px; /* negative half the size of height */

    margin-left:-150px; /* negative half the size of width */

}