elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Entrar al Canal Oficial Telegram de elhacker.net


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Ayuda SuperCapa como mostrarla y esconderla ?
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Ayuda SuperCapa como mostrarla y esconderla ?  (Leído 2,761 veces)
Diabliyo


Desconectado Desconectado

Mensajes: 1.441


shell# _


Ver Perfil WWW
Ayuda SuperCapa como mostrarla y esconderla ?
« en: 17 Enero 2011, 19:20 pm »

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.

Código
  1. <script language="javascript">
  2. function supercapa( capa, color, opacidad )
  3. {
  4. var nav=1; // navegador Mozilla
  5.  
  6. if( navigator.userAgent.indexOf("MSIE") >= 0 ) nav=0; // es I.E
  7.  
  8. var m= document.createElement('div');
  9. m.id=capa;
  10. m.style.width= document.body.offsetWidth+ 'px';
  11. m.style.height= document.body.offsetHeight+ 'px';
  12. m.style.backgroundColor= color;
  13. m.style.position= 'absolute';
  14. m.style.top=0;
  15. m.style.left=0;
  16. m.style.zIndex=2000;
  17.  
  18. if( nav==0 ) m.style.filter= 'alpha(opacity='+opacidad+')'; // es I.E
  19. else m.style.opacity= opacidad/100;
  20.  
  21. document.body.appendChild(m);
  22. }
  23. </script>
  24.  
  25. <?php
  26. echo '<a href="#supercapa" onclick="cargar_datos( \'my=campains&op=vercontenido&id_camp='. $buf["ID"]. '\', \'supercapa\', \'GET\', \'0\'); supercapa(\'supercapa\', \'#000000\', \'50\');">
  27.  
  28. <img src="imagenes/ver.png" border="0" alt="Visualizar Contenido" title="Visualizar Contenido">
  29. </a>';
  30. ?>

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
  1. <script language="javascript">
  2. function capa_verno( capa )
  3. {
  4. var layer;
  5. layer= document.getElementById(capa);
  6.  
  7. if( layer.style.visibility=="hidden" )
  8. {
  9. layer.style.visibility="visible"; //visible - hidden
  10. layer.style.display="block"; // none - block
  11. }
  12. else
  13. {
  14. layer.style.visibility="hidden"; //visible - hidden
  15. layer.style.display="none"; // none - bloque
  16. }
  17. }
  18. </script>
  19.  
  20. <?php
  21. echo '<a href="#" onclick="capa_verno(\'supercapa\');">[Cerrar Vista Previa]</a><br>
  22. <iframe src="?algo=otro">
  23.    <!-- Aqui muestro la imagen //-->
  24. </iframe>';
  25. ?>


En línea

[u]nsigned


Desconectado Desconectado

Mensajes: 2.397

JS/Node developer


Ver Perfil WWW
Re: Ayuda SuperCapa como mostrarla y esconderla ?
« Respuesta #1 en: 17 Enero 2011, 23:28 pm »

Esa 'tecnica' se llama Lightbox, aca te dejo un ejemplo de implementacion solo con CSS y JS.

Aunque mejor te recomendaria que uses la libreria jQuery para estas cosas..

Saludos


En línea

No hay atajo ante la duda, el misterio se hace aquí...
Se hace carne en cada uno, el misterio es existir!
Diabliyo


Desconectado Desconectado

Mensajes: 1.441


shell# _


Ver Perfil WWW
Re: Ayuda SuperCapa como mostrarla y esconderla ?
« Respuesta #2 en: 17 Enero 2011, 23:44 pm »

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:

Código:
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:

Código:
#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 :(
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
[Ayuda] Como desordenar ListBox y como buscar en list box
Programación Visual Basic
Red Mx 3 5,443 Último mensaje 20 Agosto 2006, 07:54 am
por Red Mx
Ocultar una unidad en batch, y pedir password para mostrarla
Scripting
-/lnkx/- 3 6,125 Último mensaje 3 Julio 2008, 07:50 am
por sirdarckcat
Recoger salida de airodump-ng y mostrarla a mi manera con bash
Scripting
l_s_h_s 1 2,304 Último mensaje 19 Enero 2015, 12:27 pm
por l_s_h_s
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines