[Ventanas modales][1] actualmente hay por montones, cada una ofrece mejores prestaciones y se comportan relativamente bien dentro del entorno de desarrollo al cual fueron creadas. [Lightbox][2] fue uno de los primeros, [Thickbox][3] uno de los más completos, Greybox, Lightwindow… enfin. Hace poco descubrí el que creo es el que va más allá de todos, y que merece una especial atención: Shadowbox.

Shadowbox es una ventana modal escrita enteramente en Javascript. Puede desplegar una amplia gama de archivos gráficos (imágenes, películas, etc.). Es crossbrowser, multiplataforma, de código limpio, relativamente bien documentado (aunque es nuevo).

Más prestaciones:

  • Su marcado se apega a los estándares web (valida).
  • Puede adaptarse fácilmente a cualquier aplicación.
  • Fácilmente customizable mediantye skins (CSS).
  • Soporta formatos de imágenes, Quicktime, Windows Media Player, Flash, Flash Video, HTML y páginas externas.
  • Maneja errores de plugin elegantemente, desplegando una sugerencia de link para bajarlo si hay necesidad.
  • Ofrece opciones configurables sin tocar código fuente.
  • Soporta enlaces vía mapeo de imágenes (mediante la etiqueta ).
  • Compatible con Firefox 1.5+, Camino, Safari 2+, Opera 9+, Internet Explorer 6+.

Impresionante, ¿no? Pero lo que más me llamó la atención fue otro detalle:

  • Mediante adaptadores, puedes usarla sin importar el framework que hayas implementado en tu sitio, o que estés acostumbrado a trabajar. O sea, puedes usar Shadowbox con Prototype, jQuery, Yahoo! UI, Mootools, Ext o Dojo; el que más te acomode. ¡Genial! Sólo debes incluir el adapter necesario de acuerdo al framework a gusto del consumidor.

Lo implementé en un nuevo proyecto personal llamado Rulz, y realmente muy potente. Lo mejor es que actúa mediante la asignación del atributo rel=“shadowbox” dentro de , lo que a contrario de Thickbox (que fue el que estaba usando), no me interfiere en el enlace ya que estaba ya pasando algunos parámetros de geo-ubicación (para Google Maps, pueden probarlo si entran a alguna reseña y presionan “Ver mapa de ubicación”).

Pros:⌗

  • fácil implementación.
  • ultra-mega-customizable.
  • multi-framework (!!!).

Contras:⌗

  • no es tan liviano como quisiera.

Shadowbox 1.0

[1]: http://www.csslab.cl/2008/01/30/ventana-modal-solo-con-css/ “Enlace en CSSLab a “Ventana modal sólo con CSS”” [2]: http://www.csslab.cl/2006/06/23/javascript-toolkit-y-demases/ “Enlace en CSSLab a “JavaScript, Toolkit y demases”” [3]: http://www.csslab.cl/2007/07/09/140/ “Enlace en CSSLab a “Validando el CSS de Thickbox””