Como hacer el efecto de BADOO

[juandedios]

Hola, estuve viendo la pagina de badoo y al dar click al enlace "registrese" sale el form encima de todo y lo que queda debajo del form (toda la pagina) queda como en sombras.

Me parece algo interesante, alguien que sepa como hacerlo me podria decir como?

Gracias.

[Yaraher]

Necesitas utilizar Javascript para lograr ese efecto. Muchas bibliotecas de Ajax (AJAX ASP .NET, Mootools, etc.) incorporan ese control "modal" que se sobrepone al resto de tu aplicación.

[juandedios]

chevere, pero si no lo quisiera hacer con alguna libreria?, yo trabajo con php

[4251389]

Yo tambien estoy interesado en ese efecto, yo manejo .net y ajax, alguen tiene una idea...

(Yo lo he visto con php)

[Shade]

-Yahoo Yui Panel
-Lightbox

Si quereis lo facil: Lightbox

Si quereis lo bueno y que os puede servir para millones de cosas Yahoo Yui Panel (y miraos todo el resto de librerias, que realmente merecen la pena).

[JavierB]

Movido al foro de JavaScript desde Css.

Saludos,

[web_asg]

Para hacer esto no necesitas librerias ni AJAX ni nada de eso (si lo que quieres es el efecto de "la ventana" que aparece) sólamente necesitas usar 3 cosas básicas: CSS, JavaScript y una o unas cuantas imagenes en PNG semitransparentes con el nivel de transparencia que quieres que se vea el fondo..

Necesitas hacer una división

Código HTML:

<div id="popup_registro"></div> 

y con CSS poner

Código HTML:

position:fixed; display:none;

y colocas una imagen de fondo semitransparente en la división en formato PNG (es el único "para la web" que soporta canal alfa de transparencia). Esta división tendrá que estar al final de la página, justo antes del

Código HTML:

</body> 

puesto que si no es así, el contenido de tu web aparecerá por encima de la división.

Dentro de esa división pones una tabla de 100% por 100%

Código HTML:

<table width="100%" height="100%"> 

con una celda, y esa celda con el contenido centrado

Código HTML:

<td align="center" valign="middle"> 

En esa celda ya puedes colocar lo que quieras. Al cargar la página no verás nada, puesto que en el estilo de la division pone

Código HTML:

display:none;

así que hay que hacer un sistema con javascript para que la muestre al hacer click. Para eso puedes hacer un pequeño script como este:

Código HTML:

<script language="JavaScript" type="text/javascript">
function mostrar_popup_registro() {
document.getElementById("popup_registro").style.display = "block"
}
</script> 

Y para abrir el "popup_registro" necesitas algo que llame a la función del script "mostrar_popup_registro()" como por ejemplo un botón como este:

Código HTML:

<input type="button" onclick="mostrar_popup_registro()" value="Regístrate"> 

Y que yo sepa esto es todo. Si tienes más dudas mándame un e-mail a [email protected]