Hola Marcos
La verdad hacer ese efecto no es tan complicado como parece.
Si te fijas en el código fuente de la web verás que existen dos <div>, uno con id dialog-overlay y otro con id dialog-box.
Lo que debes hacer es un evento para que cuando se haga click en un elemento que vos quieras, aparezca y desaparezca esa ventana modal.
Separá el problema en dos partes:
1- Crear el html del popup, podés hacerlo muy fácil si copias cómo lo hicieron en el enlace de ejemplo que pasaste.
2- Crear el evento en tu fichero .js, creo que es lo más fácil de todo.
Por ejemplo hace esto:
Código HTML:
Ver original <a href="#">Hazme click
</a> <div id="overlay"></div> <!-- aca no pongas nada, es el overlay y debes ponerle el fondo que quieras --> <!-- aca ponés el contenido de tu popup -->
Y luego con JS haces lo siguiente:
Código Javascript
:
Ver original$('a').click(function(){
$('#overlay').fadeToggle();
$('#popup-content').fadeToggle();
return false;
});
Básicamente lo que hace esto es que al hacer click oculta o muestra los div creados arriba. La posición del popup la das con CSS, por lo que no debes preocuparte de lograr esto con Javascript.
Espero que te haya servido.
Saludos.