ThickBox: Ventanas Flotantes

ThickBox es una librería javascript que permite abrir ventanas flotantes sobre páginas HTML. Esto nos permitirá mostrar imágenes o paginas sobre una ventana emergente y sin necesidad de abrir una ventana nueva, evitando de esa forma también el Bloqueador de popup de nuestro navegador. Puedes ver un [TBOXI]ejemplo, /wp-content/uploads/2006/08/thickbox.gif, Ejemplo de ThickBox[/TBOXI].

thickbox.gif

ThickBox, creado por Cody Lindley y que acaba de llegar a la versión 2.0 es sencilla de utilizar. Primero debes descargar los archivos necesarios para su funcionamiento:

  • jquery.js: Librería necesaria para el funcionamiento e thickbox.
  • thickbox.js: Funciones thickbox para abrir las ventanas.
  • thickbox.css: Hoja de estilos para la ventana emergente.
  • loader.gif: imagen que se mostrará mientras se carga el contenido de la ventana emergente

Entonces una vez que se tienen todos los archivos, lo siguiente es incluir las librerías, la hoja de estilos en nuestro HTML, esto se incluye antes de cerrar el tag HEAD.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
<link rel="stylesheet" href="thickbox.css" type="text/css" />

Luego cuando se quiere insertar una pantalla flotante con una imagen, esto se hace sobre un enlace, por ejemplo si deseamos incluir un enlace para abrir una imagen:

<a href="flash9.gif" class="thickbox" title="Ejemplo ThickBox">

Podemos ver el [TBOXI]resultado, /wp-content/uploads/2006/06/flash9.gif, Ejemplo ThickBox[/TBOXI] del código anterior. Donde se tiene que class=»thickbox» es el que indica a las librerías thickbox que se abrirá una ventana emergente, el otro dato importante es que lo que se asigne a la propiedad title se mostrará como titulo de la ventana emergente. Resumiendo podemos decir que a cualquier enlace que tengamos en nuestra página solo es necesario aplicarlo el estilo thickbox.

Esto es para el caso de las imágenes, pero si deseamos incluir una página externa, el código cambio poco, donde tenemos que incluir el ancho y el alto de la ventana emergente en la url que se le pasará a la propiedad href, veamos el siguiente ejemplo donde abrimos la página de [TBOX]Google, http://www.google.com, Google, 600, 420[/TBOX].

<a 
href="http://www.google.com?TB_iframe=true&height=420&width=600"
title="Google" 
class="thickbox">Google</a>

Se observa que el código adicional es ?TB_iframe=true&height=420&width=600, es obvio donde se pone el ancho y alto de la ventana.

Espero haber sido descriptivo con esta explicación y seguramente les va a servir mucho para las páginas webs que van a implementar.

Comentarios Total 144 comentarios

Xurri
Publicado: 24/06/2011 5:59 am

object y embed HTML

gustavo
Publicado: 25/06/2011 2:28 am

Hola, una consulta, como hacer que al cerrar la ventana popup o thickbox, enviar un valor a la ventana principal.

Xurri
Publicado: 28/06/2011 4:57 am

Hola gustavo. La mejor manera si estas trabajando con php es crearte una variable de sesion y olvidarte del tema sin pasar los datos por GET o POST. Imaginemos que despues de estar trabajando dentro de tu thickBox necesitas refrescar la página padre (desde donde abriste el thickBox) pues bien, existe un método dentro de thickbox.js que se llama TB_remove(). Este método se ejecuta siempre que se cierre el tickBox. Dentro puedes meter todo el javascript que desees por ejemplo window.parent.reload() //refresca la pagina padre al cerrarse el thickbox. Por la misma regla de tres le puesde pasar datos por GET de la forma window.location.href=»mipagina.php?mivariable=1, prueba cosas…

JPalas
Publicado: 03/07/2011 3:54 pm

Excelente script, bueno le comento que lo he puesto dentro de un div y el problema que tengo es que se muestra debajo de las demas etiquetas div que continen archivos de flash y otros.
Como soluciono ese problema, alguien me pude ayudar, urgente por favor.
Muchas gracias por su ayuda.

Xurri
Publicado: 14/07/2011 3:41 am

Hola JPalas, revisa correctamente los divs que tengas. Mira si los divs estan anidados unos dentro de otros y bien posicionados. No es lo mismo un div con posicion relativa al DOM que otro anidado que esté absolutamente relativo a su padre. Busca ayuda sobre el modelo de posicionamiento Relativo y Absoluto.

Manuel
Publicado: 14/07/2011 12:49 pm

Miren tengo una ventana principal y una sección en IFRAME donde se carga y cambia el contenido. Justamente un botón que esta en el iframe es queden debe activar el thickbox pero se oscurece solo el iframe pero mi ventana principal contenedora no? Que hacer????

Ronald
Publicado: 26/07/2011 11:55 am

Hola a todos! tengo un problema! mi caso es este, el thickbox me funciona todo bien (lo implemente en una pagina asp.net), pero como hago para llamar una pagina desde la pagina q contiene el Thickbox, pero a la pagina q quiero llamar salga del entorno del Thickbix, se podria hacer mediante un button de asp.net?? eso me serviria mucho! Espero Una respuesta. Gracias!

Julian
Publicado: 18/08/2011 5:59 pm

Buenas tardes, he intentado hacerlo, pero en ves de abrir una ventana pequeña me abre una nueva ventana, he intentado con firefox y con Chrome, pero aun asi no me sirve. Alguien me puede ayudar.?

Monica
Publicado: 11/09/2011 5:42 pm

Xurri:

Hola! intente poner window.parent.reload() al final de la funcion tb_remove para recargar la pagina padre, pero no lo consegui… no se si me falta añadir algo, agradecere mucho tu respuesta!!

Xurri
Publicado: 12/09/2011 5:46 am

Hola Monica prueba con:
window.location.reload();
ya que al estar incluido en el mismo fichero no hace falta llamar al padre. Lo de llamar al padre es en caso de que cargases un iframe con otro html y desde alli usaras el Thickbox… suerte y ya me dices algo.

Gianca
Publicado: 26/09/2011 3:46 pm

tengo una duda estoy usando thickbox si me funciona pero tengo un incomveniente yo quiero que en la ventanita qque se abre me aparesca la imagen de un producto estoy usando este

<img src="images/» border=»0″/>

pero no me muestra la imagen, y lo mas curioso es que en el archivo padre sii me aparecen las imagenes con ese codigo, he estado mirando como lo hago pero nada que me da Xurri o algun otro que me quiera ayudar por favor!

Gianca
Publicado: 26/09/2011 3:48 pm

<img src="images/" border="0"/>

Xurri
Publicado: 03/10/2011 10:16 am

Supongo que los dos ficheros estan al mismo nivel del website o puede que el fichero que cargas en el TBx esté en otra carpeta. Si estan al mismo nivel no deberias de tener problemas, si no es así, tendras que ver a qué nivel de la carpeta «images» tienes que acceder. Puede que igual si lo tienes en otra carpeta tengas que hacer:

Xurri
Publicado: 03/10/2011 10:17 am

src=»../images/»

fortiz3
Publicado: 14/10/2011 3:59 pm

Hola…

Como puedo pasar parámetros (variables) de la ventana que se abre en el DIV a la ventana principal?…

Quedo atento a sus respuestas… Gracias.

cete
Publicado: 21/10/2011 8:11 am

Hola, me funciona perfecto si meto un imagen, pero yo quiero meter otra pagina en html, y no me funciona, me sale el icono de cargando y de hay no sale, alguna solución?¿?

AG
Publicado: 22/10/2011 1:30 am

Les recomiendo que revisen esta pagina –> http://jquery.com/demo/thickbox/

Monica
Publicado: 23/10/2011 11:51 pm

Disculpa por la gran demora en la respuesta. Solo para decir que sí funcionó lo que me indicaste, para recargar la página padre: añadir la siguiente línea en la función tb_remove(), de thickbox.js

window.location.reload();

Muchas gracias!!!!!!!!!!!!

fortiz3
Publicado: 01/11/2011 2:32 pm

Como cerrar en DIV con la tecla Esc?

Gracias…

JuanK
Publicado: 02/11/2011 3:44 pm

Buenas Tardes,

Mi problema es que tengo una pagina asp.net al dar click en mi textbox abre la pagina (uso window.open) luego de que abre la pagina yo selecciono una informacion de un gridview y este me pasa por sesion la informacion y la info se agrega a un gridview de mi pagina padre, la primera vez me funciona perfecto,pero al adicionar mi segunda información esta no pasa y me deja el gridview de la pagina padre vacio, alguien me puede ayuda?

fortiz3
Publicado: 03/11/2011 8:14 am

Hola…
Me gustaría que me colaboraran con los siguientes puntos.
De antemano les agradezco mucho su colaboración…

Como puedo pasar parámetros (variables) de la ventana que se abre en el DIV a la ventana principal?…
Quedo atento a sus respuestas… Gracias.

Como cerrar en DIV con la tecla Esc?
Gracias…

Xurri
Publicado: 07/11/2011 10:27 am

fortiz3 bájate la libreria ThickBox 3.1 que ahí tienes solucionado lo de la tecla Esc para salir por que en ésta librería todavía no estaba implementado.
Sobre el segundo punto no entiendo mucho pero a ver supongo que deseas guardar datos. Si usas PHP por ejemplo, puedes guardar datos en variables de SESSION. Si lo que deseas es pasar los datos por GET deberás escribirlo dentro del método TB_remove().

Un saludo ya me dices.

fortiz3
Publicado: 08/11/2011 8:18 am

Buenos días.

Gracias Xurri por tu respuesta, cualquier inquietud te la haré saber…

Tyago
Publicado: 09/11/2011 6:54 pm

hola
mi consulta es la siguiente.
tengo un combo que se llena con clientes que provienen de mi base de datos.
tengo un enlace con thickbox de manera modal hacia el formulario para ingresar los datos del nuevo cliente.
el problema es que cuando cierro el thickbox necesito que se actualize el combo para que aparezca el nuevo cliente que acabo de registrar
utilizo jquery + php para las transacciones con la BD

gracias de antemano

Xurri
Publicado: 10/11/2011 11:54 am

Hola Tyago. Busca una fución dentro de thickbox.js que se llam TB_remove() antes del return… escribes window.location.reload();

Prueba y ya me dices….

Shadow
Publicado: 14/11/2011 11:47 am

hola primeramente gracias por el aporte muy buena js

pero al ocuparlo me dio herror coloque el var imgLoader = ‘loader.gif’; y memostro la imagen load pero no me muestra el contenido que deseo mostrar

¿¿alguien podria alludarme???

Issabel
Publicado: 25/11/2011 1:01 pm

Hola :: Estoy encantada con el uso de thickbox, pero tengo un problema, pasa que tengo un un thickbox con un form, todo esta en aspx, pero pasa que tengo un control Upload y un control Image de asp, entoncs cuando yo abro la ventana modal e intento cargar una nueva imagen para que sea visualizada, todo sale de maravilla, se hace el update a mi base de datos de sybase, pero no me muestra la imagen, quiero señalar que esto solo pasa en IE, por que en Firefox, Safari, etc, si funciona, si logro visualizar la nueva imagen cargada, pero no en IE, anteriormente usaba window.showModalDialog(); y en ese caso estando desde cualquiero navegar si funcionada lo de la visualizacion de la imagen, pero ahora q las cambie por thickbox, solo en internet explorer no funciona =( -.. leí algo acerca de que se tiene q inicializar el objeto de thickbox =S .. pero la verdd no entiendo como hacerlo …

Gracias por su ayuda … =)

fortiz3
Publicado: 02/12/2011 12:13 pm

Cordial saludo…
Quisiera poder realizar lo siguiente… Que al seleccionar una opción cualquiera, en la pagina que se carga en el Div flotante este se cierre automáticamente y no tener que ir al borde de la ventana y dar clic en Close.

Quedos atento a sus comentarios… Gracias.

Xurri
Publicado: 16/12/2011 3:07 am

Hola fortiz3. Es muy fácil. Deberas hacerte una funcion javascript o con jquery que cuando pinches sobre tus items llame a la función TB_remove(). Busca por el código del thickbox.js donde pone enlace para cerrar y fíjate que hace una llamada jquery al método click(TB_remove). Sólo tienes que hacer tu la llamada cuando selecciones el item o hagas click donde tu desees. Ya me dices cositas.

fortiz3
Publicado: 25/01/2012 10:55 am

Que mas Xurri.
No he podido realizar lo que te comente anteriormente… Como podria hacer el llamado a la función TB_remove(). desde una pagina PHP la cual cargo en el div flotante…

De antemano te agradezco por tu valiosa colaboración.

Mauro Taborda
Publicado: 21/02/2012 10:36 am

Buenas!
Como puedo pasar parámetros (variables) de la ventana flotante al formulario padre, después de realizar una búsqueda en la BD??

La búsqueda me permite buscar clientes, me pueden aparecer varias opciones, para esto tengo un checkbox para seleccionar el cliente correcto y un botón enviar para enviar los datos al formulario padre y que automáticamente se cierre la ventana flotante. Como podría hacer todo esto??

Nota: Tengo la lib 3.1

Gracias a quien pueda colaborarme.

fortiz3
Publicado: 14/03/2012 3:15 pm

Xurri… Auxilio…

No he podido realizar lo que te comente anteriormente… Como podria hacer el llamado a la función TB_remove(). desde una pagina PHP la cual cargo en el div flotante…
De antemano te agradezco por tu valiosa colaboración.

Xurri
Publicado: 20/03/2012 7:00 am

Hola fortiz3, ayúdate con un poquito de jquery y prueba lo siguiente:

$(«#TU_ID»).click(function() {
$(«#TB_closeWindowButton»).click(tb_remove);
});

Cuando pinches sobre el elemento con id=»TU_ID» llamarás al click de TB_closeWindowButton con parámetros tb_remove que es la función que cierra el thickbox. Prueba y ya me cuentas.

Estas usando la 3.1???

Veronica
Publicado: 04/07/2012 12:23 pm

Excelente. Muchas Gracias!

Leviatan
Publicado: 13/07/2012 5:36 am

hola, he intentado pero no me funciona , lo unico que consigo es q me carge una pagina en la misma y ya, y lo que quiero es q me carge dentro de la misma sin tener q abrir otra pagina de explorador y poderla cerrar y continuar en la pagina.

Otra pregunta, como es posible crear la ventana pero q se oculte , gracias

Kraworm
Publicado: 13/07/2012 11:04 am

Exelenteee, me costo hacer que funcionara pero ya esta, muchas gracias :D :D :D

Ulises
Publicado: 24/07/2012 2:54 am

gracias xurri eres un crack!! funciona de maravilla… lo que se puede hacer con el jquery y lo que comentas, es la neta!!!

jflores
Publicado: 27/07/2012 9:56 am

Alguien me podria decir como llamar a la funcion que muestra el «cargando», me explico.

quiero bloquear la pagina con la imagen que se muestra cuando la imagen aun no carga (o que diga esper un momento mientras se carga la pagina) pero no quiero mostrar imagenes, simplemente que al enviar un formulario(que no es modal sino del comun) me haga el efecto de espera mientras se realiza las operaciones en el servidor php que puede demorar varios segundos (la idea es que se desaparezca sin nececidad de hacer click una vez terminada la ejeucion del la consulta y operaciones).

Desde ya muchas gracias por la respuesta.

fortiz3
Publicado: 13/10/2012 11:20 am

Como cambiar el color al DIV de fondo, que aparece con color gris… quiero ponerle otro color mas clarito. Gracias.

silm
Publicado: 22/10/2012 7:24 am

hola lo que yo kiero hacer es a traves de un link o hipervinculo de la pantalla inicial se abra la ventana flotante y me aparezca el formulario de login….como puedo hacer….con estos archivos que estan en esta pagina se me abre la ventana flotante pero vacia….

Marcelo
Publicado: 12/02/2014 10:23 am

Me queda cargando y no habre la imagen grande en internet explorer, en mozilla si pero todo corrido a la izquierda, Saludos Marcelo

Marcelo
Publicado: 12/02/2014 10:25 am

en IE solo carga la imagen grande si actualizo la pagina.

jhos
Publicado: 09/04/2014 1:45 pm

saludos…

como le hago para que no me deje todo ordenado a la izquierda..?

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)