miércoles, 28 de octubre de 2009

Popups modales con javascript y ThickBox

ThickBox es como Lightbox pero te permite mostrar contenido HTML además de imágenes. En la web se puede comprobar cómo queda:



Su uso es muy sencillo, solamente hay que asignar los atributos href y class de un enlace tal que así:

Show hidden modal content.

Donde "hiddenModalContent" es el id del div que se mostrará:



Para cerrar el popup simplemente llamamos a la función tb_remove():



A mí, personalmente, me gusta más la opción de crearme una función para mostrar los popups, ya que si lo hacemos como he explicado anteriormente nuestra aplicación queda ligada al uso de thickbox y si en un futuro queremos cambiar (porque hemos encontrado otra librería que nos gusta más, por ejemplo) tendríamos que ir cambiando todo el código en la aplicación. Por ello podemos hacer uso de la siguiente función:

showPopup = function(div_id, width, height){
//Generar URL para thickbox
var thickboxURL = "#TB_inline?height=" + height + "&width=" + width + "&inlineId=" + div_id + "&modal=true";
//Llamar a método de thickbox que muestra un popup con la URL generada
tb_show(null, thickboxURL, null);
}

De esta forma si posteriormente quieres cambiar de librería para mostrar popups (por ejemplo colorbox tiene muy buena pinta) sólo tienes que modificar esa función, no toda la aplicación.

No hay comentarios:

Publicar un comentario