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.
Código
<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:
Código
<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>'; ?>