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 ...
Très bien ce plugin, dommage qu’on ne puisse pas l’appeler directement dans un script.
Faut forcément appeler la modal par un lien avec un class=”thickbox”. Sauf si on fait son propre script à côté.
Tu as parfaitement raison Djay. Ceci étant ce n’est pas très complexe à faire étant donné que bibliothèque Thickbox fournit toutes les API pour ouvrir, modifier ou fermer une popup via des scripts
Exactement monsieur ageorgin il suffit d’utiliser les fonctions :
pour l’ouverture ->
tb_show( null, ‘url?height=700&width=517&modal=true’, false);
pour la fermeture ->
tb_remove()
Tout à fait mon cher mon Dav16 !
La Shadowbox est bien mieux !
Comme pour toute bibliothèque on a toujours ses préférences. Personnellement, depuis que j’ai gouté à thickbox je l’utilise dans presque tous mes projets où j’ai la possibilité d’utiliser JQuery
Merci beaucoup pour cet article. Toutefois, je cherche une réponse que je ne trouve pas …. certainement que je n’arrive pas à la formuler correctement ….
J’aurais souhaité savoir si on peut faire un lien en absolu (par exemple dans une annonce adwords) vers une page de notre site avec l’une des thickbox active ? C’est pour afficher la “popup” d’une formation précise….
Merci, j’espère être claire et que vous pourrez me dire si c’est faisable ou non
Cordialement,
Emmanuelle Roux