ModalBox & ThickBox : Popup à la sauce Web 2.0

25 septembre 2007

ModalBox & ThickBox : Popup à la sauce Web 2.0

Dans ce billet en va voir deux technique (Ajax) pour crée des popup à la sauce Web 2.0 qui sont ModalBox et ThickBox

ModalBox, basé sur prototype et script.aculo.us., qui vous permet à la même manière que le très connu script lightbox pour les image, d’afficher n’importe quel contenu dans une boîte de dialogue.

Premier partie :
Téléchargez et placez les fichiers prototype.js, scriptaculous.js, modalbox.css, modalbox.js dans votre répertoire racine par exemple, ensuite ajoutez la balise qui va faire appel à ce script entre <head> et </head> :

<script type="text/javascript" src="prototype.js"></script><script type="text/javascript" src="scriptaculous.js? » load=builder,effects"></script>
<script type="text/javascript" src="modalbox.js"></script>
<link type="text/css" href="modalbox.css" rel="stylesheet">

Faites attention au paramètre “src” qui indique l’emplacement du script.

Deuxième partie :
Ajoutez l’appel du pop up dans un balise lien

 <a href="ajaxOverFlow.html" title="Simple form" onclick="Modalbox.show(this.href, {title: this.title, width: 600}); » return false;">lien du popup</a>

Création de popup avec ThickBox

Thickbox, basé sur jQuery, c’est une autre méthode qui va nous permettre d’afficher n’importe quel contenu dans une boîte de dialogue.

Premier partie :
Téléchargez et placez les fichiers jquery.js, thickbox.js, thickbox.css dans votre répertoire racine par exemple, ensuite ajoutez la balise qui va faire appel à ce script entre <head> et </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" media="screen" />

Faites attention au paramètre “src” qui indique l’emplacement du script.

Deuxième partie :
Ajoutez l’appel du pop up dans un balise lien

<a href="ajaxOverFlow.html?height=300&width=300" title="" class="thickbox">Lien du popup</a>

Pour plus d’information sur ModalBox je vous invite donc à vous rendre sur le site de ModalBox afin d’y trouver plus d’information et sur le site ThickBox pour le popup sous jQuery.

J’ai intégré un petit exemple de ThickBox pour voir le résultat il vous reste juste à cliquez ici

33 commentaires, commentaire ou Trackback

spawnrider

Article sympa tout comme le blog !
Je l’ai déjà dit ? bon, je dois me répéter…
mais c’est vrai !

25 septembre 2007
mistafab

Ouai c’est bien cool, dans le style il a aussi greybox, plus souple qui permet l’affichage de page web en plus

25 septembre 2007
MedBlog

@Spawnrider
Merci pour le petit message sympa :)
@Mistafab
greybox!! Non je connais pas, c’est avec quel frameworks

25 septembre 2007
Interface

Salut excusez moi mais je c pa trop comment implémenté ça. je me demande si je dois créer un fichier ajaxOverFlow.html et quesque je mets dedans parce que là ça marche pas

merci de m’aider

8 octobre 2007
MedBlog

Ta utiliser quelle méthode, ModalBox ou ThickBox ??

8 octobre 2007
SPIPEUR

Bonjour,
Au fait je suis dans la meme situation que INTERFACE, pour ma part j’utilise thickbox.
J’ai créer une page “devis.html” et j’essay de l’appeler mais rien n’y fait.

Merci d’avance

8 octobre 2007
MedBlog

@SPIPEUR

Je vieux de t’envoyer un exemple simplifié sur ta boite mail, j’espère que ça va t’aider a trouver ton bug,

Dis moi si ça marche et si ça marche pas aussi :)

9 octobre 2007
SPIPEUR

Bonjour,
Merci pour le coup de main, effectivement ca marche. vous pouvez regarder les résultat dans le site “rubrique devis”.
Pour ceux qui ont eu le meme probleme que moi au fait c’est simple, il suffit juste de remplacer “ajaxOverFlow.html” par le nom de votre fichier.
Voila voila, continuer a nous offrire ce genre de scrypte c’est du pure bonheur

13 octobre 2007
Quijay

Bonjour,
J’ai juste un tout petit souci… mais vraiment tout petit… :) En fait c’est le même que SPIPEUR avait au début… j’utilise le script thickbox.
Ca me fait le même résultat que si l’on va sur la page du site de SPIPEUR.
@ SPIPEUR > ton lien “devis” m’affiche ta page dans la même page que la page d’accueil initiale mais ne m’ouvre pas le popup à la sauce Web 2.0…

Merci à vous tous !
Bye,
Miss Quijay

21 janvier 2008
MedBlog

@Ouijay : la je n’ai pas tout compris, c’est possible que ma fatigue mon jeux des tour, mais si tu m’explique une autre fois, ou même m’indiquer la page comme ca je pourrais la tester moi mémé.

21 janvier 2008
Quijay

…ou ‘est moi qui ne s’est pas m’exprimer… ;-)
Je n’ai pas d’adresse web à fournir c’est en local :-(
Mais ça fait comem lorsque l’on est sur le site de SPIPEUR et que l’on clic sur devis, la page devis se charge sur la page d’accueil mais n’est pas centré et il n’y a pas de fond “translucide”…

21 janvier 2008
MedBlog

Ca m’aide pas bcq :), mais je pense que le problème vient de ton fichier de style CSS, désole @OUIJAY je peut pas faire plus que ca, comme je peut pas voir ton code !!

22 janvier 2008
Quijay

Encore un petit coucou de Quijay! :)
Honte à moi… il me manquait des .js :)
Par contre j’ai une toute petite question, la dernière, promis… j’aurais besoin de mettre la taille de la popup un peu plus grande, qu’elle s’adapte à la taille de l’image, je m’explique : j’ai une image de hauteur 200px et de largeur 100px et je voudrais mettre cette taille là et non pas une toute petite au milieu de la page, par contre il faudrait que les dimensions s’adapte à l’image selon si elle est verticale ou horizontale. J’ai bien rajouter les variables height et width dans mon .css (à l’endroit où l’on gère l’image #TB_window img#TB_Image) mais comment l’adapter au “sens” de l’image ? Déjà est-ce possible ? :)
Merci.

22 janvier 2008
MedBlog

Ben c’est déjà ca :); pour la taille des photos normalement ta rien a paramétré comme le script récupère ces dernière pour l’affichage; voir un exemple si-dessous

<a class=”thickbox” title=”grande photo” href=”images/plant1.jpg” ><img alt=”petit photo” src=”images/plant1_t.jpg”/></a>

22 janvier 2008
Quijay

Okay, merci MEDBLOG, tu es le meilleur !! Comem promis c’était ma dernière question (ça n’empêche pas de revenir sur le site :) )

Bye,
Miss Quijay

22 janvier 2008
MedBlog

No problemo :), pose toute tes questions, mais ce n’est pas sûr que j’aurais à chaque fois la réponse :)

22 janvier 2008
Fskng

Bonjour , j’ai installé Thickbox sur mon site. Mais j’ai un souci , le gif de chargement ne s’affiche pas, j’ai tout essayé, sa devrait etre bon normalement mais sa persiste ^^

La page en question est indiqué (mon pseudo ^^) -> (cliquez sur l’image)

Voila, si vous pouviez m’aider sa serait genial. Merci d’avance.

9 février 2008
MedBlog

@FSKNG : bonjours, effectivement ta oublié d’ajouter l’image de loading qui porte le nom loadingAnimation.gif dans ton dossier images.

Clic ici pour la télécharger et uplaod la dans ton dossier images

10 février 2008
Fskng

Ah, je l’avais mise au mauvais endroit ^^ !! Sa marche maintenant , Merci infiniment !!!

10 février 2008
moicjm

Je refais mon site pour lui donner un air plus “web 2.0″

Pensez vous qu’il serait possible que l’affichage de cette pop soit plus fluide… En jouant sur la fluidité ?

Merci d’avance !

4 septembre 2008
MedBlog

désole mais je n’ai pas de solution a ton problème

15 septembre 2008
Cadi

Modalbox across iframe ?
Ouvrir Modalbox via une iframe parente ou Jquery popup ?

- Que du Javascript et tant pis pour celui qui ne l’a pas activé sur son navigateur (vu que 99,9% des sites utilisent java, lol …)

° Lien qui va permettre d’appeler Modalbox :

° Dans la frame appelée on écrit le script suivant :

function modalbox()
{
Modalbox.show(’mapage.php ou mapage.html ou etc …’,{title: ‘mon titre’, width: 500});
return false;
}

Dans cette même page on retrouvera tous les scripts de modalbox à savoir :

et si vous évoluez sous Jquery il faudra remplacer par :
$(window.parent.document)

Fonctionnel sur IE7 - 8, Safari (Mac - Pc), FireFox (Mac - Pc), Opera (Mac - Pc) (ceux que j’ai testé)

By …

13 novembre 2009
MOMO

bonsoir
j’utilise les modalbox mais mon site web contient des objets flash .. le probleme c’est que les objets flash toujours au-dessus le modalbox … je trouvé une solution ça marche bien avec tous les navigateurs sauf que l’IE c’est koi le solution ?? merci

4 avril 2010
Cadi

Essaie d’enlever wmode=transparency sur tes autres flash.

6 avril 2010
MOMO

oui merci bien ça marche trés bien :)

6 avril 2010
redwan

Slt
j’adore le blog
petite question comment as tu fait pour centrer ton pop up ?!

Merci

1 octobre 2010
Ados

Enfin il faut avoir mootools!

6 octobre 2010
Louise McGill

Why does it take a minute to say hello and forever to say goodbye?

14 mai 2012
Jacquelyn

For most up-to-date informаtion yoս have to visit world wide web аnd on tһe wweb Ӏ found this website as ɑ best web site for hottest updates.

10 octobre 2018
Demetra

Youu really make it appear really easy along with your
presentation however I find this topic to be actually something that I feel I’d never understand.
It seems too complicated and very wide foor me.
I’m taking a look forward too your subsequent publish, I
wioll attempt to get the hold of it!

20 octobre 2018
Asa

Thanks for finally talking about >ModalBox & ThickBox : Popup
à la sauce Web 2.0 <Liked it!

28 octobre 2018
Tera

Admiring the hard work you put into your site and in depth information you provide.
It’s awesome to come across a blog every once in a while that isn’t
the samee old rehashed material. Excellent read! I’ve bookmarked your
site and I’m including yyour RSS feeds to my Gooogle account.

5 décembre 2018
Pansy Neuenswander

Excellent post. I used to be checking constantly this
blog and I’m impressed! Extremely useful info particularly the final phase :) I handle
such info a lot. I used to be looking for
this particular info for a long time. Thank you and good luck.

2 septembre 2019