Centering a pop-up window…

[gringojason]

Hello…

I am trying to center a pop-up window on my wordpress site. I am using a plug-in and I like how it works, but I am stumped on the CSS. Here is the link where you will see the pop-up.

Here is the CSS…

#PopUpFad {

background: #f2f2f2;

text-align: center;

font-family: Arial,sans-serif;

padding: 10px;

border: 4px solid #000;

top: 250px;

position: absolute;

margin: 0 auto;

display: none;

opacity: 0;

KHTMLOpacity: 0;

filter: alpha(opacity=0);

-moz-opacity: 0;

z-index: 1000;

}



#PopUpFad a {

text-decoration: none;

border: none;

font-size: 9px;

color: #333;

}



#PopUpFad img {

border: none;

}



#PopUpFad .PopUpFadClose {

position: absolute;

top: 5px;

right: 5px;

}



#PopUpFad.show {

display: block;

}

I have tried several things with #PopUpFad…

1. I can adjust the vertical postion by changing “top: 250px;”, however if I add a “left:” or “right:” it does not affect the horizontal position.
2. I have changed “position:absolute;” to fixed, relative, static…nothing.
3. I saw a suggestion to try “display:inline-block;”…nothing.

Everything I try, it’s like the left side is in a fixed position and will not center. Any suggestions?!? Thanks in advance for your help!!!

Jason.

[Maikel]

http://jsfiddle.net/Maikel1234/C5rRm/

Make the negative margin’s half the size of the div’s height and width.

[Maikel]

http://jsfiddle.net/Maikel1234/C5rRm/1/

There, I wrote it for you.

[gringojason]

I just saw what you wrote…going to test it. Thanks…

[Maikel]

It also shouldn’t be that difficult to do this even with random images.
If you’ve got like 20 million different images then I would recommend using JavaScript to do so.
If there’s a few then you can ad an ID to the element and go from there.

[gringojason]

Maikel…thanks for doing that. I appreciate it. I adjusted the code and added what you wrote…

#PopUpFad {

background: #f2f2f2;

border: 4px solid #000;

left: 514.5px;

position: absolute;

top: 50%;

left: 50%;

margin-top: -295px;

margin-left: -100px;

opacity: 0.9999899999999999;

KHTMLOpacity: 0;

filter: alpha(opacity=0);

-moz-opacity: 0;

z-index: 1000;

}

I changed the “margin-top” and “margin-left” px numbers to move it around the screen and center it. It works…for most of the pictures. But for a couple of them, they are still off to the right, which doesn’t make sense to me. If you go to the link and refresh it a few times, you will see that some of them are centered and others not (there are 8 or 9 images in total). Do you see anything else I need to adjust?

But this led me to another question that I am wondering if I can do with CSS. When the pop-up displays, I would like the whole browser window to be greyed out, with the pop-up image in the center. That way, the focus is on the pop-up and not on the site behind it. Then, they click out of the pop-up and see the page.

So, is there a way with CSS to make the pop up window cover the whole browser window with a light gray color (maybe even slightly transparent by adjusting the opacity), with the image in the center?

Maybe this is asking for too much, but given the capabilities of CSS, I am thinking it is possible. Thanks for your help…

[Maikel]

First off, try to add classes for each picture in the div.

Also, what you’re thinking of MIGHT be a jQuery Lightbox.

jQuery light boxes are images or content in the center of the page while the rest of the page that’s not in the div is usually a dark color with opacity adjustments

[gringojason]

Ok. Maikel…I messed around with it and got the pop-up consistently centered. Here is the current code…

#PopUpFad {

background: #fff;

border: 4px solid #000;

position: absolute;

height: 80%;

width: 60%;

margin-top: -780px;

margin-left: -385px;

opacity: 0.9999899999999999;

KHTMLOpacity: 0;

filter: alpha(opacity=0);

-moz-opacity: 0;

z-index: 1000;

}

I love how that looks. Perfectly centered. I decided against filling the whole browser window because I didn’t like the look of it. Having the extra while space around the images is fine with me.

But now my issue is getting the image centered in the pop-up. I can get it centered horizontally, but not vertically. I know this is getting out of CSS and into HTML, but this is the code I have for my text image…

Obviously, the “valign” is not working. I tried it on the tr level and even without the table, but I cannot get the image centered. Any suggestions? Thanks again for all your help…

[Maikel]

http://jsfiddle.net/Maikel1234/f4c2P/

[gringojason]

Arrrrrggghhhh. Doesn’t work. I got all excited because it should work…made sense to me. So, I added the CSS you wrote to the bottom of the plug-in CSS file and it looks like this…

#PopUpFad {

background: #fff;

border: 4px solid #000;

position: absolute;

height: 80%;

width: 60%;

margin-top: -780px;

margin-left: -385px;

opacity: 0.9999899999999999;

KHTMLOpacity: 0;

filter: alpha(opacity=0);

-moz-opacity: 0;

z-index: 1000;

}



#PopUpFad a {

text-decoration: none;

border: none;

font-size: 9px;

color: #333;

}



#PopUpFad img {

border: none;

}







#PopUpFad .PopUpFadClose {

position: absolute;

top: 5px;

right: 5px;

}



#PopUpFad.show {

display: block;

}



#wrapper {

height:100%;

width: 100%;

margin: 0;

padding: 0;

border: 0;

}

#wrapper td {

vertical-align: middle;

text-align: center;

}

Then I added the HTML to the plug-in content area…

And nothing changed. Still centered horizontally, but not vertically. I even took the CSS you wrote and added it to my theme’s custom CSS to see if that would work. Still no change. Did I input something wrong? I REALLY appreciate all the help you are giving me. Thanks…

[gringojason]

Anyone else have any suggestions for this? Thanks…

[gringojason]

Fixed it!! Found a solution. Thanks for everyone’s help…

[Author]

Posts