Cómo crear ventanas modales con modalbox

1. Introducción

Una de las cosas que más se agradecen cuando, como usuarios, utilizamos aplicaciones web es la usabilidad y el formato visual de las propias páginas. Dar la sensación de orden, de claridad y de posesión de control ayuda a que los usuarios se sientan cómodos y vuelvan.

Para ayudaros en este sentido os vamos a presentar modalbox, que consiste en una librería javascript desarrollada con prototype y script.acolu.us que os permitirá hacer ventanas de diálogo e incluso formularios de una manera bastante vistosa. Este tutorial se suma a otro anterior, donde os enseñabamos cómo mostrar imágenes con slimbox, y esperamos poder presentaros más librerías que os permitan hacer más amigables vuestras aplicaciones y páginas web.

Si quereis ver una demostración antes de empezar a leer el tutorial no teneis más que pulsar aquí

2. Descarga

Para descargar modalbox debereis ir a la sección de descargas dentro de su proyecto en google code:

http://code.google.com/p/modalbox/downloads/list

Una vez ahi debereis bajar la última versión. Este tutorial utiliza la versión 1.6.0

3. Ejemplos

Los ejemplos que vamos a mostrar en esta página pueden bajarse desde aquí

3.1 Ventana de diálogo modal

Para que aparezca, debemos pulsar aqui:

Para lograr el efecto hemos tenido que hacer lo siguiente:

1- añadimos las CSS de modalbox y las funciones javascript

2- creamos un enlace a la página cuyo contenido mostraremos en la ventana modal e invocamos a modalbox en el onclick()

Ventana modal acerca de Autentia  

La llamada a Modalbox puede ser personalizable, para lo cual han publicado un API que podreis encontrar aqui:

http://code.google.com/p/modalbox/wiki/MethodsReference

3.2 Asistente

Para que aparezca, debemos pulsar aqui:

Para lograr el efecto hacemos más o menos lo de antes:

1- añadimos las CSS de modalbox y las funciones javascript

2- creamos un enlace a la página cuyo contenido mostraremos en la ventana modal e invocamos a modalbox en el onclick()

Ventana modal acerca de Autentia  

La diferencia está en que la página que se abre, en este caso asistente1.html, tambien utiliza modalbox para mostrar el siguiente paso (que es la página asistente2.html):

La pulsación en el botón ‘¿Por qué no?’ hará que se abra la página siguiente en la misma ventana modal, sólo que ésta tendrá un ancho diferente (si os fijais, ‘asistente1.html‘ se abre en una ventana con un ancho de 600px y ‘asistente2.html‘ en una ventana con un ancho de 500px).

4. Conclusiones

Como podreis apreciar modalbox es una librería muy sencilla de utilizar que da un toque bastante vistoso a nuestras páginas si debemos mostrar formularios o ventanas modales de algun tipo (avisos, mensajes de error, etc), además de tener una ventaja, y es que se visualiza correctamente en cualquier navegador: IE, Mozilla Firefox, Opera, Google Chrome, etc.

En Autentia hemos aprendido a utilizarla y hemos querido compartir este conocimiento con vosotros.

Espero que os sea de utilidad.