Quiero hacer como Jamendo al hacer clic en "Identifícate"

#1 (**permalink**) 10/01/2012, 07:18

Hace poco pregunté como abrir una capa que ocupe todo el area de la web y se superponga a todas las anteriores. Obtuve un código que estaba bastante bien, pero que me está dando muchos problemas.

Recordé que lo que quiero exactamente es lo mismo que usa www.jamendo.com cuando haces clic en "Identifícate". Aparece un cuadro en el centro con el fondo en blanco y un formulario para hacer login. El resto de la página se oscurece un poco alrededor de el. Si haces clic fuera del área de login, se cierra automáticamente.

Observando el código, no se parece en nada a lo que me respondieron a mí.

Esto es lo que estoy usando ahora, que no lo quiero usar porque no me vale para lo que estoy haciendo:

Código HTML:

<html>
<head>
<title></title>
<style>
div#menu{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left:0;
margin: 0;
padding: 0;
background-color: #CCC;
display: none;
}
</style>
</head>
<body>
<div id="menu">
    <div>
        <a href="#" onclick="document.getElementById('menu').style.display='none';">Cerrar</a>
    </div>
</div>
<br /><br />
<div id="abrirmenu">
	<a href="#" onclick="document.getElementById('menu').style.display='block';">Abrir</a>
</div>
</body>
</html>

Reitero, esto no es lo que quiero, aunque funciona, lo que necesito realmente es lo mismo que hace Jamendo.com cuando pulsas en "Identifícate". No lo quiero para hacer login en mi web, lo que quiero es que al hacer clic en una imagen, se abra algo similar a esto en el centro, y después meter dos capas dentro de modo que en la izquierda ponga las categorías (ejemplo: recetas dulces, recetas saladas, postres...) y en la capa derecha aparezcan los enlaces que van en cada categoría. Esto último es lo de menos porque ya tengo preparado el menú. Lo único que necesito es que salga el cuadro en el centro y le pueda meter el menú.

Si alguien pudiera ayudarme a hacer esto, le estaría muy agradecido. Solucionaría todos mis problemas con la página rápidamente. Saludos.

maycolalvarez · #2 (**permalink**) 10/01/2012, 07:52

a eso le llaman ventanas modales o "lightbox" y existen muchas implementaciones, con FW o no como sexyLightbox

#3 (**permalink**) 10/01/2012, 12:38

Gracias maycolalvarez, con esto ya puedo buscar como hacerlo. Saludos.