The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Centering a pop-up window… Re: Centering a pop-up window…


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…