Comme nous le savons tous, la mode du pop up est définitivement enterrée (ou pas).En effet, celui-ci, s’il est encore employé (et s’il n’est pas bloqué), a souvent le don de gâcher votre expérience utilisateur.Pour rajeunir cet effet “boîte de dialogue”, de nombreux modules Javascript sont alors apparus.Pour remplacer l’affichage d’image dans un pop up, est apparu, par exemple, LightBox.Maintenant, pour contenir des formulaires ou confirmations, il nous manquait un module complet et convivial pour remplacer tout ça.
ModalBox, développé par wildbit labs, est un module vous permettant d’afficher n’importe quel contenu dans une boîte de dialogue au look inspiré des boîtes de dialogue sous Mac OS (Défilement par le haut).ModalBox, basé sur Prototype et scriptaculous, est valide XHTML/CSS et utilise Ajax pour charger le contenu dans la boîte de dialogue.Pour vous démontrer la simplicité de déploiement, l’ouverture de la boîte de dialogue se fait en une ligne:
<a href="mapage.html" title="test" onclick="Modalbox.show(this.href, {title: this.title, width: 600}); return false;">TEST</a>
La fenêtre charge donc l’url contenu dans le href du lien et l’appel de la fonction peut s’accompagner de nombreux paramètres avec entre autres largeurs, hauteur, titre, durée d’effet …Quel plaisir de pouvoir enfin avoir des processus conviviaux de récolte d’information!Je vous invite donc à vous rendre sur cette page de Test ou sur le site de ModalBox afin d’y trouver toutes les infos dont vous avez besoin pour déployer cette solution.
30 Commentaires
Très sympa ce module
Faudrait voir si quelque chose dans le même goût existe sous JQuery aussi …
Tout à fait Kévin. J’ai utilisé un équivalent avec JQuery, ça s’appelle Thickbox et c’est très très facile d’emploi
Thickbox ? Ben il ne me reste plus qu’à tester alors :p
Merci pour l’info
En effet, ThickBox est une alternative avec JQuery. Après, tout est question de contrainte de framework.
Cependant, j’affectionne plus particulièrement modalBox qui a soigné l’apparition des contenus (Bon d’accord, étant Mac user, je suis peut être influencé).
En fait, JQuery propose beaucoup de scripts tout faits très intéressants. Donc je l’ai utilisé. Le problème, c’est qu’on ne peut pas mélanger JQuery et PrototypeJS par exemple, ça fait des erreurs. Sinon plein de fois j’aurais préféré Prototype, ça c’est sur, beaucoup plus simple à utiliser je trouve et pas mal de choses intéressantes.
Quant à la présentation, force est de constater que ModalBox est en effet plus soigné (je ne suis pas mal user :p)
[...] pop-up façon Web 2.0, histoire de vous fondre incognito dans le paysage ? Emmanuel de Taillac vous révèle Modalbox, et vous apprend à réaliser vos pop-up de formulaires, par exemple. Annonceurs peu scrupuleux [...]
Ca m’a tout l’air simple d’utilisation, je vais tester après je verrais bien, merci pour ce billet …;-))
Apparement, Modalbox n’est pas pour moi, il faut être sous Mac OS X pour le downloader, dommage …;-)
[...] Modalvox vous permet de faire des pop ups Web 2.0 chez Emmanuel de Taillac.fr […] [...]
Pas besoin d’être sous Mac pour downloader et utiliser, Linux ou Windows font tout aussi bien l’affaire :-¬∞
@Jean-Marie: En effet, on parle de techno Web client et là, c’est du Javascript. Donc ce qu’on télécharge, c’est un script javascript. Celui-ci est ensuite appellé sur une page Web. That’s all.
C’est pour les developpeurs tout ca…
Je comprend mieux maintenant…merci …;)
Avec la fonction “noconflict” plus de problème pour utiliser jquery et modalbox la documentation n’est pas la pour décorer.
La seul chose non tester est l’utilisation de thickbox en interaction avec modalbox mais comme thickbox a tendance a être souvent en conflit ……
Bonjour,
j’ai un problème avec l’utilisation de modalBox.
Lorsque je fais un lien vers ma page “page.php?id=2″ avec l’évènement onclick pour utiliser modalBox, mon script fonctionne bien cependant je n’ai aucun contenu dans cette page page.php
Or, quand je met return true au lieu de return false, mon contenu est bien présent.
D’où peut provenir cette erreur ?
@David: en mettant return true sur ton évènement “onClick”, tu lui dis en fait de faire la redirection vers la page alors que le return false permet d’ignorer le href. Il doit y avoir un souci sur ta page php!
Petit conseil: Essaye d’abord avec une page html pour tester que tout fonctionne normalement.
J’ai déjà fait le test avec une page html simple. Et rien ne s’affiche.
faut t-il repriciser les javascript dans cette nouvelle page html vers laquelle on fait le lien ?
@David: Je suis incapable de cerner ton problème mais le simple fait d’étudier le code source présent sur la page de test ou un debugage via Firebug t’apportera surement ta réponse.
En fait il s’agissait d’un problème d’ordre d’appel des scripts javascript.
Merci en tout cas pour tes réponses rapides.
@David: Je ne sais pas trop ce que tu veux faire mais à première vue, je te conseillerai de taper dans le DOM de ta page pour modifier celle-ci qui se trouve en arrière plan et qui réapparaitra après.
Si tu recharges ta page, tu vas perdre beaucoup trop de temps et casser l’experience utilisateur…
@David: Tu n’es pas obligé de recharger une page pour modifier son contenu.
Tu peux comme je t’ai dis modifier cette donnée là en tapant dans le DOM.
Pour être plus clair, il suffit d’encapsuler ton nombre de personnes dans un élément html puis de modifier via javascript ton nombre.
Ton HTML:
il y 212 personnes
Ton Javascript avec Prototype:
var nbPers = $(‘fruits’).innerHTML – 1;
$(‘nbPers’).update(nbPers);
C’est une piste, approfondis la chose.
Bonjour,
j’ai utilisé le code Modalbox mais j’ai un petit soucis. je sais pas si une personne peut m’aider.
je souhaite mettre une action sur le bouton Enregistrer. c’est à dire fermer la fenetre des que la personne clique sur enregistrer.
Voila mon code : onclick=’Modalbox.show(this.href, {title: this.title, height: 600}); return false;’
merci de votre aide
Hello à tous !
J’utilise Modalbox depuis quelques jours et je trouve ça très fun !
Par contre je souhaiterai modifier l’effet d’appartion “Slide” par un “appear” style Lightbox …
Quelqu’un aurait une piste ???
D’avance merci !
C’est bon j’ai trouvé !
Il suffit de remplacer “Slidedown” par “Appear” (par exemple) à la ligne 152 du fichier modalbox.js pour la version 1.6.0 de la modalbox
Ne pas oublier de remplacer Slidedown par fade également ainsi que les options de durée d’apparition etc ….
Très agréable d’utilisation en tout cas
Bonjour,
C’est vrai que ce module à l’air très bien. Mais est-ce que quelqu’un peux me dire comment centrer la pop-up dans l’écran. svp.
Merci d’avance.
Ps : je suis débutant.:-)
test !
Hello !
Quelqu’un aurait des pistes sur la gestion des caractères accentués (en PHP) pour la modalbox ??
D’avance merci !
(D’autres réponses in english à cette adresse : http://code.google.com/p/modalbox/issues/list)
Salut les gar !
Je viens de télécharger ModalBox. Il est super cool comme script !
Jè fais 1 formulaire et je voudrais qu’il affiche une page de confirmation avant de faire disparaitre la fenetre.
Comment proceder? Quelqu’un pourrais m’y aider ?
Merci d’avance.
Salu, voila j’utilise modalbox pour un formulaire.
cela marche tres tres bien, sauf que pour verifier les champs saisi, j’utilise le php sur la meme page et donc je voudrai rafraichir la page dans le modalbox…..
j’ai esseilé pas mal de chose mais aucune fonctionne, en faite j’ai l’impression qu’il me reouvre un nouveau formulaire et donc ne fait pas le traitement php….
j’ai donc un bouton de type submit.
Voila en esperant avoir des solutions merci a vous
[...] pop-up façon Web 2.0, histoire de vous fondre incognito dans le paysage ? Emmanuel de Taillac vous révèle Modalbox, et vous apprend à réaliser vos pop-up de formulaires, par exemple. Annonceurs peu scrupuleux [...]
Comment utiliser Modalbox et les controle spry de dreamweaver ?