07
OCT

Sweet Alert - Donnez du style à vos alert et confirm en Javascript

Publié le 07/10/14 à 09h30 par DJo

Sweet Alert est une bilbiothèque Javascript permettant de remplacer vos vieilles alert et confirm Javascript.

Sweet Alert est une bilbiothèque Javascript permettant de remplacer vos vieilles alert et confirm Javascript.

Avouez-le, quand vous étiez plus jeune, vous debuggiez votre Javascript avec les alertes, ou pire encore, vous utilisiez des alert pour prévenir vos visiteurs qu'une action s'est bien ou mal déroulée ...

Il n'y'a rien de moins design qu'une alert box classique, malgré l'évolution des navigateurs.

Sweet Alert est une très belle alternative aux alert traditionnelles, le fonctionnement est le même, mais tout est plus ... design!

Sweet Alert Confirm box

Voici un exemple de confirm box Javascript revisité à la sauce Sweet Alert. C'est quand même bien plus sexy !

Côté mise en place, c'est très simple, voici comment créer une alerte simple avec titre et message:

swal("Here's a message!", "It's pretty, isn't it?");

Et pour faire la confirm box en image ci-dessus, avec toutes les options et callbacks:

swal({   
  title: "Are you sure?",   
  text: "Your will not be able to recover this imaginary file!",   
  type: "warning",   
  showCancelButton: true,   
  confirmButtonColor: "#DD6B55",   
  confirmButtonText: "Yes, delete it!" 
},  function(){ 
  // Callback
});

Vous pouvez aussi appliquer des classes, ajouter des icones etc. faire quelques effets CSS3:

Sweet Alert avec effets

Vous pourrez récupérer la lib en téléchargeant l'archive ou en l'installant via bower.

 

Site Officiel

Baraguiné par le 08/10/14 à 01h30
Bonjour et merci pour ce post très intéressant cependant j'éprouve un sérieux problème. Je souhaite le mettre en place sur un bouton Google

seulement la popup ne reste pas et je suis automatiquement redirigé vers la page sans qu'il me demande confirmation des solutions ?

Merci par avance !!!
Baraguiné par DJo le 08/10/14 à 07h23
DJo sur La Ferme du Web
As-tu bien déclaré le script dans un domready ?

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web