Buenas.
Quier hacer el efecto que se encuentra en muchos sitios que es la de mostrar una supercapa con opacidad en donde esta supercapa ocupa todo el ancho y alto del monitor, el fondo es opaco en negro, y en medio muestra un contenido, por lo general lo usan para mostrar imagenes, a esta capa tambien le adieren una imagen o enlace para cerrar la capa.
Buscando la forma de como hacerlo, he logrado mostrar la capa, que ocupe todo el ancho y alto de la dimencion del sitio, se super posiciona encima de todo el sitio, toma el efecto de opacidad y en medio muestro un iframe que contiene la imagen, de esta forma si la imagen es mayor al ancho del que establezco, se pone un scrollbar... y en la parte superior un enlace para cerrar la capa ([Cerrar]).
El problema es que, no logro cerrar la capa :(... Vaya, desaparece la imagen que muestro en medio, desaparece el iframe y el mensaje de [Cerrar], pero no desaparece la supercapa con opacidad :(
En mi code la funcion supercapa() es invocada por un enlace que pulsa el usuario, que se invoca atraves del evento onclick(), esta invoca dos funciones la funcion que muestra la supercapa() y una funcion de AJAX que escribe los datos en la capa.
<script language="javascript">
function supercapa( capa, color, opacidad )
{
var nav=1; // navegador Mozilla
if( navigator.userAgent.indexOf("MSIE") >= 0 ) nav=0; // es I.E
var m= document.createElement('div');
m.id=capa;
m.style.width= document.body.offsetWidth+ 'px';
m.style.height= document.body.offsetHeight+ 'px';
m.style.backgroundColor= color;
m.style.position= 'absolute';
m.style.top=0;
m.style.left=0;
m.style.zIndex=2000;
if( nav==0 ) m.style.filter= 'alpha(opacity='+opacidad+')'; // es I.E
else m.style.opacity= opacidad/100;
document.body.appendChild(m);
}
</script>
<?php
echo '<a href="#supercapa" onclick="cargar_datos( \'my=campains&op=vercontenido&id_camp='. $buf["ID"]. '\', \'supercapa\', \'GET\', \'0\'); supercapa(\'supercapa\', \'#000000\', \'50\');">
<img src="imagenes/ver.png" border="0" alt="Visualizar Contenido" title="Visualizar Contenido">
</a>';
?>
Cuando se muestra la imagen, el enlace de [Cerrar] invoca la funcion capa_verno() en javascript, que se supone cambia los estilo de visibility y display, si estos estan activados, los desactiva:
<script language="javascript">
function capa_verno( capa )
{
var layer;
layer= document.getElementById(capa);
if( layer.style.visibility=="hidden" )
{
layer.style.visibility="visible"; //visible - hidden
layer.style.display="block"; // none - block
}
else
{
layer.style.visibility="hidden"; //visible - hidden
layer.style.display="none"; // none - bloque
}
}
</script>
<?php
echo '<a href="#" onclick="capa_verno(\'supercapa\');">[Cerrar Vista Previa]</a><br>
<iframe src="?algo=otro">
<!-- Aqui muestro la imagen //-->
</iframe>';
?>
Esa 'tecnica' se llama Lightbox, aca te dejo un ejemplo (http://sigt.net/archivo/como-crear-un-lightbox-con-css-y-sin-librerias-javascript.xhtml) de implementacion solo con CSS y JS.
Aunque mejor te recomendaria que uses la libreria jQuery para estas cosas..
Saludos
Buenas.
Ya logreo que se cierre la capa, fue mis simple solo agregue dos styles en el javascript y listo, pero el problema ahora es que se aplica la opacidad a toda la capa, vaya, tambien al iframe que lleva dentro.
Aqui el code actualizado:
function supercapa( capa, color, opacidad )
{
var nav=1; // navegador Mozilla
if( navigator.userAgent.indexOf("MSIE") >= 0 ) nav=0; // es I.E
var m= document.getElementById(capa);
//var m= document.createElement('div'); // quite esta linea porque no me dejaba cerrar la capa (esconderla), no entiendo porque
m.id=capa;
m.style.width= document.body.offsetWidth+ 'px';
m.style.height= document.body.offsetHeight+ 'px';
m.style.backgroundColor= color;
m.style.top=0;
m.style.left=0;
m.style.visibility='visible';
m.style.display='block';
if( nav==0 ) m.style.filter= 'alpha(opacity='+opacidad+')'; // es I.E
else m.style.opacity= opacidad/100;
document.body.appendChild(m);
}
El style:
#supercapa {margin:auto;z-index:7;position:absolute;}
#supercapa .child {z-index:8;width:900px;height:600px;font:12px Arial, Verdana, sans-serif;color:black;background-color:#ffffff;
margin:auto;text-align:center;padding-top:2px;margin-top:10px;}
Como vemos en el style de arriba, la capa supercapa se muestra ocupando toda la pantalla y con la opacidad establecida, pero la clase child tambien se le aplica esta opacidad :S, porque ?, no entiendo porque tambien se le aplica opacidad, esto hace que se vea mal :(