MEDBLOG : Actualités Geek Web 2.0 & Webdesign

Actualités Geek Web 2.0 & Webdesign

ModalBox & ThickBox : Popup à la sauce Web 2.0

Popup a 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

AddThis Social Bookmark Button

31 commentaires, commentaire ou Trackback

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

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

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

  4. 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

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

  6. 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

  7. @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 :)

  8. 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

  9. 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

  10. @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é.

  11. 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”…

  12. 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 !!

  13. 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.

  14. 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>

  15. 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

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

  17. 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.

  18. @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

  19. Fskng

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

  20. 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 !

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

  22. 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

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

  24. MOMO

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

  25. redwan

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

    Merci

  26. Enfin il faut avoir mootools!

  27. Louise McGill

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

  28. 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.

  29. 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!

  30. Asa

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

Répondre á “ModalBox & ThickBox : Popup à la sauce Web 2.0”

Recevez les derniers articles par mail :

 

Recent Comments

Par Albert Einstein

“La connaissance s'acquiert par l'expérience. Tout le reste n'est que de l'information.”

Feedburner RSS
Ajoute a Technorati Favoris