ThickBox 2.1 est une librairie écrite en JavaScript qui permet l'affichage de pages web avec un comportement identique à celui des boîtes de dialogue modales qui requièrent l'attention de l'utilisateur.
Lorsqu'une telle page est affichée, par l'activation d'un lien, l'arrière plan est d'ailleurs grisé.
En voici un premier exemple : une image fractale.
En utilisant les fichiers JavaScript et CSS de ThickBox, il a tout simplement suffi d'écrire un lien classique avec la balise <a> en indiquant la classe thickbox :
Il est aussi possible de présenter un panorama d'images (commencez par le premier lien) : une image fractale une autre image fractale une dernière.
Pour lier les images dans un même panorama, utilisez la même valeur pour l'attribut rel, dans chaque balise <a> :
<a href="/ThickBox/images/image2.jpg" title="Une autre image fractale !" class="thickbox" rel="fractales">une autre image fractale</a>
<a href="/ThickBox/images/image3.jpg" title="Une dernière !" class="thickbox" rel="fractales">une dernière</a>
ThickBox permet aussi d'afficher une page HTML complète sur le même principe. Vous pouvez le tester en cliquant sur le lien suivant :
Exemple d'utilisation de ThickBox avec une page HTML
Ce qui correspond au code HTML ci-dessous :
Comme vous pouvez le constater dans cet exemple, l'attribut href contient l'URL de la page à afficher, à laquelle on a transmis deux paramètres indiquant les dimensions de la page.