Hola que tal!
No tenía que nada que hacer aqí que me tome un tiempo haciendo este ejemplo:
Código HTML:
<html>
<head>
<script src="jquery.js">
</script>
<script>
function abrirVideo(){
//desocultamos el bloqueador
$("#div_bloqueador").css("display","block");
//usamos jquery para aplicar el efecto de oscurecimiento y cuándo termine se muestre el div con el video
$("#div_bloqueador").fadeTo("slow",0.6,function(){$("#div_sobrepuesto").fadeTo(1200,1,function(){$("#video").css("visibility","visible")});});
}
function cerrarVideo(){
//ocultamos el video
$("#video").css("visibility","hidden");
//desvanecemos el contenedor del video y después el bloqueador
$("#div_sobrepuesto").fadeTo(1200,0,function(){$("#div_bloqueador").fadeTo("slow",0,function(){$("#div_bloqueador").css("display","none");$("#video").css("visibility","hidden");})});
}
</script>
<style type="text/css">
/*z-index es una propiedad que si es mayor al de otro elemento será puesto encima de él. */
*{
margin:0px;
padding:0px;
z-index:0;/* se coloca cero a todo para asegurar que los divs de abajo sean superpuestos, aunque generalmente cero es el predeterminado */
}
#div_sobrepuesto{/* éste div es dónde va el video "Por así decirlo". */
display:none;/* se oculta al iniciar la página */
z-index:10;/* se aplica que debe superponerse a cualquier elemento inferior en z-index */
position:absolute;/* para que pueda colocarse en medio y no mueva nada más */
background:#a50;
border:2px solid #000;
width:550px;
height:350;
text-align:center;
top:10px;
left:20%;/* lo colocamos en medio (en mi caso solo le tanteo hehe) */
opacity:0.0;
filter:alpha(opacity=0);
}
#div_bloqueador{/* éste bloqueará la página para que no se pueda dar click a nada más que al contenido del #div_sobrepuesto */
background:#000;/* se elige cualquier color oscuro para desvanecerlo */
opacity:0.0; /* para que al abrir el video haga un efecto de oscurecimiento es de 0 a 1: 1 es sin opacidad y 0 con total opacidad (blanco) */
filter:alpha(opacity=0); /* IE exíge ésta propiedad (la de arriba es para mozilla) aqui es de 0 a 100 */
display:none;/* lo ocultamos para que no bloquié la página */
z-index:5; /* es mayor que cualquier elemento de la página pero menor que el #div_soprepuesto */
width:100%;
height:100%;/* se aplica la medida completa para que tape toda la página aunque es conveniente usar pixéles si cuentas con medidas exactas de tu página para que se tape bien */
position:absolute;/* para que pueda tapar todo sin mover nada */
top:0px;
left:0px;/* lo colocamos hasta la esquina para que cubra todo */
}
</style>
</head>
<body>
<table style="color:#fff;background:#449;width:100%;font-weight:bold;font-size:20px;"><tr><td width="20%">Inicio</td><td width="20%">Peliculas</td><td width="20%">Foros</td><td width="20%">Contacto</td><td width="20%">Mi cuenta</td></tr></table>
<h1>CONTENIDO DE LA PÁGINA</h1>
<input type="button" value="Ver video!" onclick="abrirVideo()" style="font-size:20px;font-weight:bold" />
<div id="div_sobrepuesto">
<!-- contenido, por ejemplo pondré un video -->
<h2>Peliculas - Peliculas - Peliculas - Peliculas</h2>
<iframe id="video" style="visibility:hidden" width="400" height="280" src="http://www.youtube.com/embed/gTfmSf5I2uM" frameborder="0" allowfullscreen></iframe>
<br /><input type="button" value="CERRAR" onclick="cerrarVideo()" />
</div>
<div id="div_bloqueador"></div>
</body>
<html> Si no conoces JQuery, te recomiendo que le des un chequeo a un manual, es sencillo, muy fácil y cómodo de usar. Tiene muchos efectos además de fadeTo muy bueno y así te ahorra tiempo, sin embargo deberías de ingeniartelas sin usar JQuery de vez en cuándo, para prácticar y mejorar tu javascript, Saludos!!