dynamic div layer in center of screen

[ROSEBLOOD]

I'm not exactly sure if this is the right forum to be posting this in, and I'm not exactly sure how to explain exactly what I want to do.

What I am trying to do is to make a DIV layer appear in the center of the users screen, and gray out everything behind it. Similar to what face book does when you add, poke, etc a friend.

I am just asking how, in CSS, to lay it out. The coding aspect of making the div appear is easy. A shove in the right direction would be helpful. I can find more examples if you are unclear as to what I am asking.

~ROSEBLOOD

[Hen Asraf]

Try this...<div id="example">Stuff</div>CSS:div#example{
width:500px;
height:500px;
position:fixed;
top:50%;
left:50%;
margin: -250px 0 0 -250px;
background:#000;
opacity:0.3;
filter:alpha(opacity=30);
}

Edit: Doesn't seem to work in IE... *grr*

[ROSEBLOOD]

Unfortunately that doesn't work. You can't do math in CSS :(

~ROSEBLOOD

Edit: Nevermind, you changed your code.

[Hen Asraf]

Still doesn't work in IE D= only Firefox.

[ROSEBLOOD]

Using your code here is what I did:

#wrapper {
position: absolute;
height: 100%;
width: 100%;
margin: 0;
opacity: .6;
filter: alpha(opacity=60);
background-color: #505153;
z-index: 500;
}
#info {
position: fixed;
height: 500px;
width: 500px;
top: 50%;
left: 50%;
margin: -250px 0 0 -250px;
background-color: blue;
opacity: 1;
filter: alpha(opacity=100);
z-index: 600;
}


and here are my DIV's

<div id="wrapper">
<div id="info">
</div>
</div>


Now my problem is that the #info is not solid. Even though I told it to be. Any ideas? In IE, everything is solid....

~ROSEBLOOD

EDIT: I've tested mine in Chrome, Firefox, Opera, and Safari and IE8.

[ROSEBLOOD]

For whatever reason, IE8 need to have quotes around its filter setting...

filter: "alpha(opacity=60)";


Now it looks just like every other browser, everything is transparent.

~ROSEBLOOD

[ROSEBLOOD]

Thanks for your help Hen.

It's been fixed, I just had to move #info outside of #wrapper in my html.

~ROSEBLOOD

[bluestartech]

it is much easier to use a library such as jQuery or script.aculo.us for this kind of work, why re-invent the wheel and deal with cross-browser headaches?

[nickelleon]

What you are trying to create is called a modal window (http://en.wikipedia.org/wiki/Modal_window) btw. Learn something today :)