Darkening the entire page using CSS

[oskar]

I'd like to make a style that covers an entire webpage with a dark, semi-transparent cover. I've looked elsewhere online and have come up with this:

background-color:#000000;
filter:alpha(opacity=80);
opacity: 0.8;
position:absolute;
top:0px;
left:0px;
width:100%;
height:document.body.parentNode.scrollHeight + 'px';
display:block;
Is this code correct?

[KDLA]

You'll need a z-index, to make sure the layer is on top.
I use the lightbox 2 technique (http://www.huddletogether.com/projects/lightbox2/), and it has this as the styling to create the darkened/transparent layer:
{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}

[oskar]

Great, thanks. The height is 500px...what if the page is longer than that? I'd like to cover everything.

[KDLA]

I'd add

html, body {height: 100%;}

and change the 500px to 100%.

(There may be better ways of implementing this -- I just thought that this technique seemed to fit in with your criteria.)

KDLA

[oskar]

I wonder how Lightbox does it...their CSS covers the entire webpage, not just up to 500 pixels.

[oskar]

Weird...I just looked at the CSS and it's exactly as you posted it. I have no idea how that works...

[oskar]

I've been trying quite hard to get this to work, but no luck :-( I'm trying to add the CSS and create the element all via javascript, using code offered in another thread. Here's what I have...

function DarkenPage()
{
var str= "#myStyle{position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; filter:alpha(opacity=60); opacity: 0.6;}"
var pa= document.getElementsByTagName('head')[0] ;
var el= document.createElement('style');
el.type= 'text/css';
el.media= 'screen';
if(el.styleSheet) el.styleSheet.cssText= str;// IE method
else el.appendChild(document.createTextNode(str));// others
pa.appendChild(el);
}

Can anyone experienced in CSS/Javascript tell me why this wouldn't work? I'm using Safari, BTW.