Boite de dialogue à la Facebook avec jQuery

Jeudi 18 juin 2009 à 20:34 par Cody

En travaillant sur Populiz, nous avons pris conscience de l’utilité d’exploiter un système de fenêtrage pour afficher certaines informations ou plutot résumé d’informations.

Par exemple dans notre application un utilisateur peut envoyer un message privé à un autre utilisateur.A un moment donné le destinataire doit être informé de la réception du nouveau message. Une boite de dialogue offre un moyen simple et efficace pour avertir le destinataire.

Notre besoin étant assez clair nous avons commencé à tester les principales solutions à base de jQuery (liste ci-dessous):

jQuery UI

jQuery UI

ThickBox

thickbox jQuery

Facebox

facebox jQuery

SimpleModal

SimpleModal jQuery

Nous avons éliminé jQuery UI à cause de la taille des fichiers et de la présence de certains composants dont nous n’avons pas forcément besoin. jQuery UI reste néanmoins une bonne solution pour des applications reposant principalement sur des élements en javascript.

Entre les trois candidats restants notre choix s’est porté sur SimpleModal qui offre une optimisation (taille du fichier) et une flexibilité importantes tout en gardant un code propre et assez simple à modifier en cas de besoin.

L’inconvénient majeur de SimpleModal étant l’esthétique des boites dialogues, nous lui avons offert un petit lifting inspiré de Facebook agrémenté par un bouton de fermeture et un style (bordures transparentes) aux couleurs de Populiz.

Ci-dessous, le résultat final qui a été aussi bien satisfaisant pour nous que pour le créateur de SimpleModal :

Demo
Télécharger le code source

Tags: , , , , , , ,

Laisser un commentaire