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 btw. Learn something today