Javascript - Fade - oscurecer fondo con javascript

<!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=utf-8" />
<title>Javascript - Fade - oscurecer fondo con javascript</title>
<meta name="description" content="oscurecer fondo con javascript" />
<script>
function $(id){
return document.getElementById(id);
}
function N(){
if(navigator.appName=='Microsoft Internet Explorer'){ return true; }else{ return false; }
}
function fade(actividad,Cancho,Calto,elemento){
if(actividad=='crear'){
var F=document.createElement('div');
F.setAttribute('id','Fondo');
F.setAttribute("onclick","fade('sacar',Cancho,Calto)");
F.style.background='#000';
F.style.position='absolute';
F.style.left='0px';
F.style.top='0px';
if(document.body.offsetHeight>screen.height){
F.style.height=(document.body.offsetHeight+15)+'px';

}else{ F.style.height=screen.height+'px';}
F.style.width=(document.body.offsetWidth+15)+'px';
var Nav=N();
if(Nav==true){ F.style.filter='alpha(opacity=0)'; }else{ F.style.opacity=0; }
document.body.appendChild(F);
var Caja=document.createElement('div');
Caja.setAttribute('id','Caja');
Caja.style.width=Cancho+'px';
Caja.style.height=Calto+'px';
Caja.style.position='absolute';
Caja.style.background='#FFF';
Caja.style.left=(screen.width/2)-(Cancho/2)+'px';
var Pos=posicion(elemento);
if(Pos.top<screen.height){
Caja.style.top=(screen.height/2)-(Calto/2)+'px';
}else{
Caja.style.top=(Pos.top-(Calto/1.3))+'px';
}
document.body.appendChild(Caja);
ColorN=0;
ColorIe=0;
$('Fondo').onclick=function(){ sacar('Fondo'); }
fade('fade',Cancho,Calto,elemento);

}else if(actividad='fade'){

if(ColorN<=0.6 && ColorIe<=60){
var Nav=N();
if(Nav==false){
ColorN=ColorN+0.1;
$('Fondo').style.opacity=ColorN;
}else{ ColorIe=ColorIe+1;
$('Fondo').style.filter='alpha(opacity='+ColorIe+')';
}
setInterval(function(){ fade('fade',Cancho,Calto,elemento);},50);
}

}

}
function sacar(id){$(id).parentNode.removeChild($(id)); if(id=='Fondo'){ sacar('Caja'); } ColorN=0; ColorIe=0;}
function posicion(element) {
if (typeof element == "string")
element = document.getElementById(element)

if (!element) return { top:0,left:0 };

var y = 0;
var x = 0;
while (element.offsetParent) {
x += element.offsetLeft;
y += element.offsetTop;
element = element.offsetParent;
}
return {top:y,left:x};
}
</script>
</head>
<body>
<div style="border:1px dashed #CCC; padding:5px; font-family:Verdana, Geneva, sans-serif; font-size:10px; color:#333;">
La función es esta: fade(actividad,Cancho,Calto,elemento); Donde toma los valores: "crear" -crea los elementos - o "fade" -realiza el efecto-.
Cancho: ancho de la ventana del centro. Calto: alto de la ventana del centro. Sólamente en números ej: 800. 
Elemento: nombre del elemento al cual se hace click para llamar a la función - puede ser "this" o "document.getElementById('tudiv')".
El div blanco generado en el centro tiene id 'Caja'. Allí pueden cargar cualquier cosa teniendo en cuenta las dimensiones mencionadas.
<a href='http://php-online.com.ar/muestras/code.html'>Ver código</a>
Clickeen en los ejemplos inferiores para probarlo.
</div>
<div style='border:3px solid #F60; padding:3px; font-family:Verdana, Geneva, sans-serif; font-size:10px;' onclick="fade('crear',800,100,this)">Click aquí para oscurecer.</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div style='border:3px solid #F60; padding:3px; font-family:Verdana, Geneva, sans-serif; font-size:10px;' onclick="fade('crear',100,200,this)">Click aquí para oscurecer.</div>
 
 
 
 
 
 
 
<div style='border:3px solid #F60; padding:3px; font-family:Verdana, Geneva, sans-serif; font-size:10px;' onclick="fade('crear',500,200,this)">Click aquí para oscurecer.</div>
</body>
</html>