Podrías usar algo así:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script>
function $(id){
return document.getElementById(id);
}
function set_opacity(div, val) {
if (div.filters) { //For IE
val *= 100;
try {
div.filters.item("DXImageTransform.Microsoft.Alpha").opacity = val;
} catch (e) {
// If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
div.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity='+val+')';
}
} else {
div.style.opacity = val;
div.style.MozOpacity = val; //This is for older Mozilla Browsers
}
}
function getWindowData(){
var widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal;
if (typeof window.innerWidth != 'undefined'){
widthViewport= window.innerWidth;
heightViewport= window.innerHeight;
}else if(typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth !='undefined' && document.documentElement.clientWidth != 0){
widthViewport=document.documentElement.clientWidth-25;
heightViewport=document.documentElement.clientHeight;
}else{
widthViewport= document.getElementsByTagName('body')[0].clientWidth-25;
heightViewport=document.getElementsByTagName('body')[0].clientHeight;
}
xScroll=self.pageXOffset || (document.documentElement.scrollLeft+document.body.scrollLeft);
yScroll=self.pageYOffset || (document.documentElement.scrollTop+document.body.scrollTop);
widthTotal=Math.max(document.documentElement.scrollWidth-25,document.body.scrollWidth-25,widthViewport);
heightTotal=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight,heightViewport);
return [widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal];
}
function alargar(){
var pagina=getWindowData();
if(!$('overlay')){
ov=document.createElement('div');
ov.id='overlay';
ov.style.zIndex='90';
ov.style.backgroundColor='black';
try{set_opacity(ov, 0.5);}catch(e){}
document.getElementsByTagName('body')[0].appendChild(ov);
set_opacity($('overlay'), 0.5);
}
document.getElementById('overlay').style.position='absolute';
document.getElementById('overlay').style.height=pagina[5]+'px';
document.getElementById('overlay').style.width=pagina[4]+'px';;
document.getElementById('overlay').style.top=document.getElementById('overlay').style.left=0;
}
function cerrar(){
document.getElementsByTagName('body')[0].removeChild($('overlay'));
}
/*Ejemplo de cómo eliminar la opacidad*/
window.onload=function(){
setInterval(function(){if($('overlay'))cerrar();},10000);
}
</script>
</head>
<body>
<a href="javascript:alargar()">oscurecer</a>
</body>
</html>