Si se han estado peleando con los eternos problemas de interpretación del CSS en los distintos navegadores para conseguir que un DIV semi transparente ocupe el 100% del ancho y largo de la página, esta función en JavaScript les puede resultar de utilidad. La idea de este pequeño código es que, pasandole 3 parámetros, se encargue de la creación de este DIV con opacidad reducida "deshabilitando" todo lo que queda debajo de él. La forma de utilizar la función es sencilla: generateCoverDiv('divId', '#000000', 75); donde divID es el ID que se le asignará a la capa semi transparente, #000000 es el color de base de esa capa y 75 es el porcentaje de opacidad que se le pretende dar a la misma. Así­ en el ejemplo se estará generando una capa cuyo width y height son el 100% del contenido de la página, con color negro y con un 75% de opacidad. El z-index de esta capa de cobertura tendrá 100 como valor, cosa que comunmente resultará suficiente para conseguir ese efecto de "deshabilitado" de los elementos que quedan debajo. El código de la función en cuestión es el siguiente:

PLAIN TEXT
JavaScript:
  1. function generateCoverDiv(id, color, opacity)
  2. {
  3.     var navegador=1;
  4.     if(navigator.userAgent.indexOf("MSIE")>=0) navegador=0;
  5.    
  6.     var layer=document.createElement('div');
  7.     layer.id=id;
  8.     layer.style.width=document.body.offsetWidth+'px';
  9.     layer.style.height=document.body.offsetHeight+'px';
  10.     layer.style.backgroundColor=color;
  11.     layer.style.position='absolute';
  12.     layer.style.top=0;
  13.     layer.style.left=0;
  14.     layer.style.zIndex=100;
  15.     if(navegador==0) layer.style.filter='alpha(opacity='+opacity+')';
  16.     else layer.style.opacity=opacity/100;
  17.    
  18.     document.body.appendChild(layer);
  19. }

Si en la página tenemos elementos como select, animaciones Flash o similares, como siempre el IE dará la nota haciendo que estos elementos se visualicen por encima de la capa creada, aunque esta última tenga mayor z-index. Esto es un viejo y conocido problema de renderización de elementos por parte del IE, cuya solución (o mas bien parche) consiste en colocar un iframe del mismo ancho y largo de la capa semi transparente. Dejamos el tema del iframe para un futuro post, aunque ya andan rondando por la web varias soluciones para dicho problema.

Cualquier duda consulten.