Crear un cuadro de dialogo estilo Facebook con jQuery

Si eres de los que les gusta los cuadros de diálogo de Facebook, este post te va a gustar. En esta ocasión vamos a hacer un tutorial para crear un cuadro de dialogo estilo Facebook con jQuery, en donde podremos modificar algunas opciones para que pueda ser funcional.

Entonces, después del salto les dejo el tutorial, espero lo sigan y dejen sus comentarios si tuvieron algún problema.

Lo primero que tenemos que hacer es descargar la libreria FbModal, una carpeta que tiene un ejemplo y las imágenes que constituyen el cuadro, es importante que lo descarguen.

JAVASCRIPT

Lo primero es adjuntar los archivos js, en este caso el de la librería jQuery la direccionamos desde la página de Google, pero la otra la tendremos que subir a un servidor. El código es este:

Ahora tenemos que programar un poco el cuadro de diálogo, sólo basta copiar el código y pegarlo, modificando algunos elementos, como el título, el texto de los botones y la opacidad.

/p>

CSS

Ahora nos dedicamos a crear los estilos, la parte que en más larga, y es que a pesar de que en realidad el HTML no es más que una capa, es el plugin el que se encarga de crear algunos elementos extra, por eso es que hay muchos estilos.

HTML

Ya llegamos a la parte de HTML, y como les decía, no es más que una capa con texto, donde podremos poner la información que nosotros queramos:

Y para poder llamar al cuadro de diálogo basta agregar un link en cualquier parte de nuestro sitio para que aparezca:

Código final

Entonces, con eso tendremos nuestro propio cuadro de diálogo de Facebook, espero les haya gustado el tutorial y si tienen alguna duda o problema con el tutorial no duden en escribirme un comentario.