Thickbox la modalbox à la mode JQuery
Utilisant comme framework javascript de plus en plus JQuery (comparaison des frameworks javascript) j’ai été amené à développer des interfaces utilisateur à base de “popup ajax”.
Ne voulant pas réinventer la roue, j’ai cherché quels étaient les plugin JQuery qui offraient cette fonctionnalité. Mon choix s’est arrêté sur Thickbox.
Thickbox est plugin JQuery permettant d’afficher à l’écran du contenu en sur-impression de la page courante.
Ce plugin est très léger : 20ko en version compressée et 58ko en version normale. De plus son mode de fonctionnement est l’un des plus simple que j’ai utiliser et certainement le moins intrusif.
En effet pour ouvrir un contenu dans une “popup ajax”, il suffit (une fois le script chargé dans la page évidemment) de définir un lien HTML portant l’attribut class=”thickbox”. Thickbox se charge donc d’ouvrir la cible du lien dans une popup en sur-impression de la page courante.
La puissance de la bibliothèque ne s’arrête pas là. En effet, le comportement de la popup est paramétrable. Vous pouvez très simplement déterminer par exemple la hauteur ou la largeur de la popup à afficher. Pour cela, rien de plus simple il suffit d’ajouter à la suite de l’url du lien à charger en popup les paramètres height et/ou width.
Par exemple, si nous voulons charger la home de google dans une popup de largeur 200 pixels et de hauteur 300 pixels il suffit de définir un lien dont l’attribut href aura la valeur http://google.fr?height=300&width=200.
de la même manière si nous voulons que notre popup soit modale il nous suffit d’ajouter le paramètre d’url &modal=true.
Je conseille vivement à tous les utilisateurs de JQuery de tester cette bibliothèque très utile et tellement simple d’utilisation qu’elle rendra vos développement javascript encore plus joyeux. Vous remarquerez au passage que le système d’affichage des photos de ce blog utilise thickbox 
Loading ...
