Ventana emergente (PopUp) con javascript y css

Hoy voy a explicar cómo he hecho la ventanita emergente (o popup) con javascript y css que se puede ver en esta captura:

Aunque pueda parecer algo complicado no es más que html. Son dos simples divs que se muestran u ocultan según convenga.

html

En nuestra página html debemos añadir un div con el contenido que queramos que se muestre dentro del popup:

[php]

Master password:

[/php]

Esto es un simple div con la imagen del circulito con la X y un formulario dentro.

Y también habrá que añadir el div que hace que el fondo se ponga oscuro:

[php]

[/php]

hojas de estilo (css)

Ahora hay que darle un estilo para que aparezca centrado, que el fondo sea gris medio transparente, etc.

Este es el código css de geco que hace todas estas movidas:

[php]
#overlay {
display: none;
position: fixed;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
z-index: 999;
background-image: url('/static/images/overlay.gif');
}

#master {
clear: both;
padding-bottom: 1em;
}

.input {
display: none;
color: black;
position: fixed;
left: 25%;
top: 50%;
width: 50%;
z-index: 1000;
text-align: center;
background-color: white;
border: 1px solid black;
}

.close {
cursor:pointer;
float: right;
}
[/php]

Lo más importante aquí es el display: none que hace que no aparezca por defecto (ya lo mostraremos con javascript) y los atributos de posición, position: fixed para que sea fijo en la pantalla y left y top que posicionan el div. También es importante el z-indez que posiciona una cosa encima de otra.

El efecto sombreado lo hago con una imágen gif. Pero gif no soporta medio-transparencias, con gif un pixel o es transparente o es opaco. Pues muy fácil, se hace un truqui que consiste en poner un pixel negro y otro transparente alternativamente creando el efecto deseado.

Aparecer/desaparecer (javascript)

Para que aparezca el popup cuando se pulsa sobre un enlace o un div, hay que usar javascript. Lo más fácil es usar jquery y así lo he hecho yo, creando el fichero gecojs.js que contiene lo siguiente:

[java]
...

$(document).ready(function() {
$(".pwdname").click(function(){
var pwd = $(this).next().html();
$(".input").fadeIn(300);
$("#overlay").fadeIn(300);
});
$(".close").click(function(){
$(".input").fadeOut(300);
$("#overlay").fadeOut(300);
});

$("#rec").click(function(){
mimasterpwd = $("#masterpwd").attr("value");
$("#masterpwd").attr("value", "");
$(".input").fadeOut(300);
$("#overlay").fadeOut(300);
setTimeout(olvidar, 10 * 60 * 1000);
});
});
...
[/java]

Y aquí está la mágia de jquery, al pulsar sobre cualquier objeto de la clase pwdname, se lanza la función que muestra tanto el input (popup) como el overlay (fondo gris) con un efecto de aparición (fadein)

Luego si se pulsa en el botón de cerrar o en el botón recordar se oculta con un fadeOut.

Esto no tiene más historia y es un efecto visual bastante agradable.

Fácil, Fácil :P