Mark Brown - Web Standards & CSS

There’s many incarnations of lightbox js that have popularized this approach as a kind of dialog box.
It turns out it’s wonderfully simple to achieve in modern browsers:

<div id=“overlay”></div>
<div id=“dialog”>
  <p>Some content</p>
</div>

#overlay {
	position: fixed; /* A marvelous property */
	z-index: 100;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: #000;
	filter: alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
}
#dialog {
	height: 400px;
	width: 700px;
	margin: 0 auto;
	position: fixed;
	z-index:101;
	background: #F2F2F3;
	left: 50%;
	top: 50%;
	margin-top: -200px; /* half total height - could be scripted if unknown but css is smoother and cooler */
	margin-left: -350px; /* half total width */
}

With a bit of unobtrusive js to show/hide these two elements and wallah!

IE6 craziness:

/* IE6< fixed positioning - kind of */
* html #overlay, * html #dialog {
	position: absolute;
}
* html #dialog {
	top: expression(ignoreMe = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)+ (document.documentElement.clientHeight / 2));
}

It’s a little jumpy but all scripted versions of this kind of positioning have that effect.

Easy peasy Japanesey.