Make div appear and change the whole html to be darker

Question

I have a div and after I click a button, I would like the div to appear (which I can do), but I would like the whole background to become darker too (this is inline with overlay

Answer 1

Here's another example of this behavior, in the demo: click the "watch video" link to fade in the video and screen dimmer divs (escape to fade out)

jsfiddle demo

CSS:

#screenDimmer,#video {display:none;position:absolute;}
#screenDimmer {top:0;left:0;width:100%;height:100%;background:#000;opacity:.5;
    /* ie opacity */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter:alpha(opacity=50);}
#video {top:50%;left:50%;margin-left:-240px;margin-top:-193px;}

HTML: