Ventana superpuesta

blauget · #1 (**permalink**) 30/06/2013, 23:06

Hola a todos!

Antes que nada gracias a todos porque eh estado usando información de otros temas, que me han sido de gran utilidad. Soy nuevo en ForosdelWeb y espero poder ayudar en todo lo que este a mi alcanze (que no es mucho).

Hace no mucho arranqué con todo esto del diseño y programación web, y hoy fundamentalmente surgió una duda existencial.
Mi objetivo es que al darle click a un link cualquiera, aparezca una pantalla como "superpuesta" sobre la página que ya está abierta. Estilo popus pero diferente, más bien centrado y con estilo, y que ponga como todo el fondo más grisaseo.

No pude encontrar una página que lo tenga bien para darles el ejemplo, así que espero puedan ayudarme con tan pocos detalles...

Busque en otros temas pero no pude encontrar nada, aparte de que no se como se llama.

En fin, muchísimas gracias!

pzin · #2 (**permalink**) 01/07/2013, 02:43

Bienvenido blauget.

Lo que buscas se conoce comúnmente como lightbox. Hay varias librerías y plugins en JavaScript con las que poder hacerlas sin tener amplio conocimiento.

Se puede también hacer mediante CSS, haciendo uso de :target y luego alguna posición absoluta para eso de oscurecer el fondo:

Código CSS:

Ver originaldiv#ventana_superpuesta {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  background: rgba(0,0,0,.5);
}
 
div#ventana_supuesta:target {
  display: block;
}

Código HTML:

Ver original<a href="#ventana_supuesta">Abrir ventana</a>
<div id="ventana_supuesta">Contenido...</div>

Hacerlo mediante CSS tiene algunas desventajas, que se podrían evitar usando :checked. Pero ya sería algo un poco más complejo. Y dependiendo de lo que quieras poner en esa ventana, tal vez te convenga más usar algunas de las soluciones tipo lightbox que pululan por la red.

blauget · #3 (**permalink**) 01/07/2013, 22:57

Muchas gracias Pzin por tu pronta respuesta!! De echo me sirvió de mucho.

Ya estuve indagando sobre estas herramientas y me quedé con Shadowbox, descargé archivos y lo eh estado probando, pero me surgió un problemita! Cuando quiero cargar una página web, como para pedirle datos de usuario y contraseña, no me aparece. Con fotos si funciona excelente, pero con páginas no! Inclusive probé con www.google.com como dice en muchos ejemplos, pero nada. Te el código que realiza ésta operación especificamente a ver si me puedes ayudar.

Lo primero que hago es cargar tanto el js como el css de Shadowbox y dejo el script pronto para usar.

Código HTML:

Ver original<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

Una vez echo ésto vamos al html

Código HTML:

Ver original<body>
 
<a rel="shadowbox;width:100%;height:50%" href="login.html" title="Galeria Empresa">Pula</a>  
 
 
</body>

Cuando le doy click al enlace, carga la pantalla negra como para mostrar algo pero no muestra nada! Sin embargo si en vez de ser un archivo html, le pongo una imagen anda perfecto!

Vi un tema similar aquí en la web que se habia solucionado agregando en el rel, "player=iframe". Pero tampoco pude.

Desde ya muchísimas gracias!

pzin · #4 (**permalink**) 02/07/2013, 01:53

Pues no conozco Shadowbox. Date una vuelta por la documentación y los ejemplos a ver si pone algo. Sino te sirve eso y tienes la página subida a algún sitio entonces pasa el enlace a ver qué puede ser.

blauget · #5 (**permalink**) 02/07/2013, 20:00

Sigo sin poder solucionarlo!! Probe en los ejemplos de la web que me pasaste, y en otras pero lo aplico textual como dicen los ejemplos! No se que puede ser..
Lo subi a un hosting para que puedas verlo y ver si me pudes ayudar, accede a la página con el siguiente link:

[URL="http://liga7.site44.com/shadow.html"]http://liga7.site44.com/shadow.html[/URL]

Desde ya muchísimas gracias.

pzin · #6 (**permalink**) 02/07/2013, 20:11

Intenta poner todos los archivos en la raiz, en lugar de en shadowbox/shadowbox/shadowbox. Luego si quieres cargar un sitio externo, tendrás que ponerle "http://" delante.

blauget · #7 (**permalink**) 02/07/2013, 20:20

Ya hize lo que me dijiste, pero el problema sigue :/

Ya actualizé en el hosting para que puedas verlo... Si se te ocurre algo más, te agradezco!