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
|
1 2 3 4 |
<script type="text/javascript" src="includes/prototype.js"></script> <script type="text/javascript" src="includes/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="includes/modalbox.js"></script> <link rel="stylesheet" href="css/modalbox.css" type="text/css" media="screen" /> |
2- creamos un enlace a la página cuyo contenido mostraremos en la ventana modal e invocamos a modalbox en el onclick()
|
1 |
<a href="http://www.adictosaltrabajo.com/wp-content/uploads/tutorial-data/modalbox/autentia.html" title="Autentia" onClick="Modalbox.show(this.href, {title: this.title, width: 600}); return false;">Ventana modal acerca de Autentia </a> |
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
|
1 2 3 4 |
<script type="text/javascript" src="includes/prototype.js"></script> <script type="text/javascript" src="includes/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="includes/modalbox.js"></script> <link rel="stylesheet" href="css/modalbox.css" type="text/css" media="screen" /> |
2- creamos un enlace a la página cuyo contenido mostraremos en la ventana modal e invocamos a modalbox en el onclick()
|
1 |
<a href="http://www.adictosaltrabajo.com/wp-content/uploads/tutorial-data/modalbox/asistente1.html" title="Encuesta" onClick="Modalbox.show(this.href, {title: this.title, width: 600}); return false;">Ventana modal acerca de Autentia </a> |
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):
|
1 |
<input value="¿Por qué no?" onClick="Modalbox.show('asistente2.html', {title: 'Responda a la pregunta, por favor', width: 500}); return false;" type="submit"> |
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.
hola, es posible que dependiendo de la cantidad de texto se cree un scroll??
Gracias
Muy buen ejemplo!!
Amigos el ejemplo 3.1 y 3.2 me dan el mismo resultado, quiero mostrar una imagen un letreo y dos botones para confirmacion y cancelado
El ejeplo que quiero lorar hacer es este : http://www.adictosaltrabajo.com/tutoriales/modalbox/asistente1.html, claro que con la imagen…
no me funciona