Usando MOOdalBox – un Lightbox para HTML
enero 18, 2008
Hace poco en uno de los proyectos que adelanto, necesitaba mostrar la información de una noticia o evento cuando le daban a un link, pero no quería hacerlo en una página nueva, ya que esto implicaba cargar nuevamente todo el diseño de la página solo para mostrar un par de líneas de texto.
Buscando en la Web encontré MOOdalBox, una librería que utiliza el framework de mootools como base para funcionar pero que permite cargar cualquier contenido HTML dentro de una ventana animada que se sobrepone sobre la página, al mismo estilo de Lightbox pero con HTML.
Esta herramienta es ideal para mostrar porciones de contenido que no justifican una redirección del navegador y que se vuelva a cargar todo el contenido gráfico.
Con MOOdalBox, tenemos la posibilidad de definir el tamaño de la ventana que se requiere mostrar, y es tan sencillo de aplicar que de seguro no dudaremos en usarlo en nuestros proyectos.
Primero debemos descargar lo necesario del sitio de MOOdalBox.
En el archivo comprimido vienen tres carpetas:
-
Css
- Moodalbox.css
-
Img
- Closelabel.gif
- Loading.gif
-
Js
- Mootools.js
- Moodalbox.js
En la cabecera del documento HTML (<HEAD>) deben incluirse las dos librerías y la hoja de estilo.
| <script type=»text/javascript» src=»/js/mootools.js»></script>
<script type=»text/javascript» src=»/js/moodalbox.js»></script> <link rel=»stylesheet» href=»/css/moodalbox.css» type=»text/css» media=»screen» /> |
Y luego solo es necesario incluir rel=»moodalbox» dentro de la etiqueta de hipervínculo en la que necesitamos aplicar este efecto.
| <a href=»paginaDestino.html» rel=»moodalbox» title=»Texto de descripción de la pagina»>Texto del Link</a>. |
Y eso es todo. Ya esta aplicado el efecto y nuestro sitio ya parece más dinámico y Web 2.0.
Links:
Codeline 
octubre 15, 2008 at 9:44 am
Yo uso Moodalbox, pero tiene un problema con Safari…
marzo 30, 2009 at 1:40 pm
No em funciona….no sé qué hacer…
May 9, 2009 at 9:55 pm
Hola, cual es el error que muestra? quizas pueda ser porque tienes una version muy reciente de mootools. comentame el error y te ayudo a ver que pasa.
May 16, 2009 at 2:22 pm
el cuadro aparece siempre en el lado superior de la pagina.. cuando el elemento al que le hice click esta casi al final de la pagina no puedes ver el efecto sino hasta que te desplazas a la parte superior… aguna manera de mejorar eso?
junio 2, 2009 at 9:11 pm
Conoces alguna forma de que al pinchar sobre el fondo obscurecido por el moodalbox no se cierre (dejar bloqueado el popup hasta que se ejecute un evento)…?
noviembre 9, 2009 at 5:11 pm
como vinculo moodalbox desde flash?? he tratado de hacerlo pero no lo consigo, ayuda por favor.
diciembre 2, 2009 at 4:07 pm
Estoy en las mismas que ro.
Quiero abrir moodalbox desde flash, pero no lo consigo. Si alguien sabe como realizarlo, por favor que nos ayude.
Gracias.
diciembre 14, 2009 at 8:52 am
pues yo tengo otro problema…
siempre me aparece el «oops.. there was a problem with your request»,
no carga mi html….
febrero 11, 2010 at 1:51 pm
no no funciona es una garcha siempre da el mensaje de error.
no funciona, no se puede hacer un vínculo de mierda!!!
marzo 11, 2010 at 5:05 am
a mi me ocurre lo mismo. Lo has solucionado??
enero 4, 2010 at 10:04 pm
pues baje todo y no me funciona al darle click al texto me aparece la imagen de loading pero me manda a la pagina k kiero cargar me la manda un un _blank osea en una nueva ventana
febrero 1, 2010 at 9:11 pm
En cuanto al problema de manuel, como sugerencia comprobaría que no esté ejecutándose en local… a veces lo sencillo lo hacemos complicado. Suerte
May 25, 2010 at 5:55 am
Hola, parece que el link ya no funciona. Se podría encontrar de otra manera
Mil gracias!!
May 25, 2010 at 9:28 am
Hola, creo que lo he encontrado http://codigoaldescubierto.wordpress.com/contenido/moodalbox/
noviembre 3, 2010 at 9:44 am
Hola, descargué la versión que entrega Gema (la del post no está activa). ¿Estás segura que es el mismo? no consigo hacerlo funcionar…
Saludos,
Sebastián
febrero 16, 2011 at 10:18 am
Estimado, ando buscando una forma de llamar un pagina.html en ligthbox desde un boton de flash, si me pudieras ayudar en éste te lo agradeceré un montón. a aparecido en otras preguntas pero veo la solución.
Saludos
noviembre 9, 2011 at 6:23 am
tengo un pequeño problema, estoy usando el moodalbox para que al pinchar en un boton me aparezca un pequeño formulario html.
hacerlo lo hace correctamente, pero al iniciar la funcion y abrirme la nueva pantalla, la pantalla que se queda por debajo se descoloca completamente es como si el javascript me modificara el css principal. alguien puede ayudarme.
gracias
marzo 9, 2012 at 6:15 pm
[…] Fuente : https://codeline.wordpress.com/2008/01/18/usando-moodalbox-%E2%80%93-un-lightbox-para-html/ […]
abril 21, 2012 at 9:37 pm
[…] Activision Announces 007 Legends | Movie News | Empire http://t.co/SQFeefxI [evcorreu] Shared Usando MOOdalBox – un Lightbox para HTML « Codeline. Siguiente parada: Tuxtla Gutierrez, Chiapas!! Nos leemos en unos días! [evcorreu] Si te gusta […]
abril 23, 2012 at 4:10 pm
Estoy creando un manual para poder utilizar un ligh box, ya sea en modo html o solo fotos, cuando lo tenga les aviso..
Saludos
May 25, 2012 at 10:21 pm
no sirve para nada , no funciona modalbox por ninguna parte