Présentation

SweetAlert est une librairie Javascript conçue par Tristan Edwards. Très simple de compréhension et d'utilisation, elle se révèle très appréciable pour présenter à l'utilisateur d'une application ou d'un site web des alertes ergonomiques et bien plus conviviales que leur équivalent standard.

Aperçu

Voici un exemple basique d'affichage d'une erreur :

La confirmation d'une action peut également être améliorée :

Dans cet exemple plus complet, l'image associée au message de confimation a été personnalisée. Les boutons d'annulation et de confirmation conduisent de plus à l'affichage d'une alerte complémentaire.

Référence

Les fichiers Javascript et CSS composant cette librairie, ainsi que la description de son utilisation (paramétrage, options, personnalisation) sont disponibles sur GitHub : https://github.com/t4t5/sweetalert.

Mise en œuvre

Il faut tout d'abord déclarer dans l'en-tête de la page les fichiers CSS et Javascript de la librairie :

<link rel="stylesheet" type="text/css" href="path/sweet-alert.css" />
<script type="text/javascript" src="path/sweet-alert.min.js"></script>

Un identifiant ou une classe peuvent alors être attribués au bouton ou tout autre élément déclencheur de l'alerte :

<button id="myButton" class="myButton">My button</button>

Il ne reste alors qu'à associer la fonction d'initialisation de la SweetAlert à l'élément déclencheur une fois la page chargée. L'exemple de code qui suit consiste en une initialisation via jQuery du bouton par son identifiant et produit le résultat du second exemple présenté plus haut dans cet article :

<script type="text/javascript">
  $(document).ready(function() {
    $("#myButton").click(function() {
      swal(
        {
          title: "Are you sure?",
          text: "Do you really want to execute this dummy action?",
          showCancelButton: true,
          confirmButtonColor: "#DD6B55",
          confirmButtonText: "Yes, I do!",
          allowOutsideClick: true,
          imageUrl: "http://www.antoinehedin.com/silverpeas/anthed/img/logo.png",
          closeOnConfirm: false,
          closeOnCancel: false
        },
        function(isConfirm) {
          if (isConfirm) {
            swal("Action confirmed", "Dummy action has been executed.", "success");
          } else {
            swal("Action cancelled", "Nothing happened", "error");
          }
        }
      );
    });
  });
</script>

Le paramétrage parle de lui-même et la personnalisation du contenu et de son affichage peuvent bien entendu être accentués par la surcharge de la feuille de styles de base.