Visor de medios (overlay) sobre una capa (layer) semitransparente
Este código que he creado y utilizo ya para diversos proyectos en distintas variantes sirve para hacer aparecer "visores" de contenido (cajas) que aparecen sobre un velo semitransparente sobre el contenido de la página actual.
Por ejemplo, pinchamos sobre un enlace, la pantalla se oscurece (sin dejarse de ver el contenido de la web) y aparece en primer plano un cuadro donde podemos ver, por ejemplo, un texto, una imagen ampliada, un video, o una película flash.
Esto es muy útil para evitar recurrir siempre a las pop-up windows, o nuevas ventanas, debido a los blockers que mucha gente tiene activados (bloqueadores de pop-up)
El script integra el CSS cross-browser (útil en diversos navegadores) para las propiedades de opacidad y transparencia opacity, filter, y alpha vistas en un post anterior.
Incluir height:100% en el estilo del body sirve para que el "velo" semitransparente ocupe toda la pantalla en páginas que no ocupan la totalidad del visor del navegador.
Es importante la propiedad z-index de las capas (layers, div's) que contienen al visor y al "velo"... Recordemos, por cierto, que esta propiedad depende de haber declarado la position del objeto (Referencia, fijarse en la frase "For a positioned box, the 'z-index' property specifies...", muy importante el stacking).
Si os fijáis, el enlace <a href="#" onclick="open_overlay();return false;"> incluye, tras la llamada a la función, el javascript return false; para que el # indicado en el href no haga que la página suba hasta su top al hacer click (ya que es el evento onclick el que dispara la función javascript). Quitadlo para ver a lo que me refiero.
Más adelante intentaré hacer que el visor se ajuste (resize) según el tamaño del contenido que va a albergar, así como un efecto de fundido o fade-in al surgir el "velo" semitransparente (el cual, por cierto, no tiene por qué ser negro).
EDITO: El código está arreglado. Puedes verlo funcionando aquí.
Espero que os sea útil.
<html>
<head>
<style type="text/css">
#overlay {
visibility:hidden;
display:none;
position:absolute;
top:0px;
left: 0px;
z-index: 9;
width: 100%;
height: 100%;
background-color: #000000;
opacity:0.65;
}
#media {
visibility:hidden;
position:absolute;
display:none;
left: 30%;
top:65px;
z-index: 10;
width: 450px;
height: 300px;
background-color: #fff;
border:1px solid #454545;
}
*:first-child+html body #overlay {
filter: alpha(opacity=65);
} * html #overlay {
filter: alpha(opacity=65);
}
</style>
<script language="javascript">
function open_overlay(mediatype, url) {
document.getElementById("overlay").style.display="block";
document.getElementById("media").style.display="block";
document.getElementById("overlay").style.visibility="visible";
document.getElementById("media").style.visibility="visible";
var _docHeight = document.body.offsetHeight;
document.getElementById("overlay").style.height=_docHeight;
var cadena="Sustituir por texto, img , video, swf...";
document.getElementById("media").innerHTML=cadena;
}
function close_overlay() {
document.getElementById("overlay").style.visibility="hidden";
document.getElementById("media").style.visibility="hidden";
}
</script>
</head>
<body style="height:100%;margin:0;padding:0">
<a href="#" onClick="open_overlay();return false;">Imagen o texto sobre la que hacer click para abrir la capa.</a>
<div id="overlay" onClick="close_overlay()">
</div>
<div id="media">
</div>
</body>
</html>
(7 votes, average: 4.71 out of 5)
Loading ...
