Div tag flotante que bloquea una página

El miércoles 18 de enero de 2012 pasará a la historia debido a que grandes empresas y blogers de todo internet bloquearon sus páginas en protesta a SOPA; a tal movimiento también me uní con mi humilde (pero en algo significativo) blog.

¡Nada mal!, ¿no creen?
Vale, éste post será solo para explicar la simple manera que logré éste efecto, en el cual un div flotante de color negro y semitransparente cubría al resto de la página bloqueando a todos los elementos que se encuentre abajo del div tag.

En primera se necesita la librería de JQuery e incluirla en el código de la página:

<script src="jquery-1.6.2.js" type="text/javascript"></script>

Luego se necesita crear el div que será lo que bloqueará la página:

<div id="fade" class="fadebox"> <!--Aquí pueden poner el texto o contenido que quieran--></div>

Y pos último agregarle las características CSS necesarias para que abaque toda la página, la bloquee y sea semitransparente:


.fadebox 
{
      position: absolute;
      top: 0%;
      left: 0%;
      width: 100%;
      height: 100%;
      background-color: black;
      z-index:1001;
      -moz-opacity: 0.8;
      opacity:.80;
      filter: alpha(opacity=80);
    }

->Background-color indica el color del div.
->z-index indica la profundidad del div (entre más sea la profundidad más hacia adelante estará el div).
->El width y height manejan porcentaje para que abarque TODA la página.
->Top y left solo indican que se iniciará desde el origen de la página.
->El apha indica el grado de transparencia (100 es un color sólido, 0 es completamente transparente)
->La posición absolute ayuda a bloquear todos los elementos que se le contraponen :)

Ésto es todo para lograr un efecto así de sencillo.