SweetAlert.js: Schickere und flexiblere Alternative zu alert()

Internetseiten werden mehr und mehr zu umfangreichen und komplexen Anwendungen. Interaktionen mit der Website werden dabei häufig mit einem Alert bestätigt. Der Standard-Alert des Browsers ist zwar oft ausreichend, aber nicht wirklich schick. Mit SweetAlert lassen sich sehr einfach animierte Alerts erstellen, die zudem auch noch mehr Funktionen als der langweilige Standard bieten.

„SweetAlert“ einbinden und loslegen

SweetAlert stammt aus der digitalen Feder des in Stockholm ansässigen Entwicklers Tristan Edwards, dessen Homepage übrigens ein nettes Beispiel für parallaxes Scrolling ist. SweetAlert steht unter der MIT-Lizenz und ist kostenlos verwendbar. Es besteht aus einem JavaScript und einer CSS-Datei. Abhängigkeiten bestehen nicht. Der Einstieg ist denkbar einfach:

Neben einer JavaScript-Datei muss eine Stylesheet-Datei im HTML-Dokument eingebunden werden. Diese enthält alle Styles für das Aussehen der Alerts. Anschließend lassen sich per „swal()“ verschiedenartige Alerts ausgeben.

swal("Das hat schon mal geklappt.");

Für einen ganz simplen Alert-Dialog genügt es, der Methode einen Titel zu übergeben, der eingeblendet werden soll. Ein „OK“-Button zum Schließen beziehungsweise Bestätigen des Dialogs wird automatisch ergänzt. Wer neben einem Titel für den Alert auch einen zusätzlichen Text einblenden will, ergänzt einfach einen weiteren Parameter im „swal()“-Aufruf.

swal("Das hat schon mal geklappt.", "Aber warum?");

Unterschiedliche Alert-Typen möglich

Neben einem einfachen Info-Alert gibt es weitere Typen. Sie unterscheiden sich darin, dass ein passendes Icon im Dialog dargestellt wird. Dieses ist je nach verwendetem Typ animiert oder statisch. So gibt es warnende Alerts mit einem Ausrufezeichen („warning“), sowie Alerts, die einen Fehler („error“) oder einen Erfolg („success“) signalisieren. Der Typ wird einfach als dritter Parameter übergeben.

swal("Das hat schon mal geklappt.", "Aber warum?", "success");

Neben der kurzen Notation wie im obigen Beispiel gibt es auch eine Langform, bei der alle Parameter benannt und als Literalobjekt zu übergeben sind. Werden der „swal()“-Methode mehr als nur Werte für Titel, Text und Typ übergeben, muss zwingend ein Literalobjekt Verwendung finden.

swal({
  "title:" "Das hat schon mal geklappt.",
  "text:" "Aber warum?",
  "type": "success"
});

Nicht immer reicht es aus, einen Alert mit einem Button zum Schließen auszustatten. Gerade wenn der Alert genutzt wird, um das Ausführung einer bestimmten Funktion zu bestätigen, sollte neben einem Bestätigungsbutton auch einer zum Abbrechen vorhanden sein.

swal({
  "title": "E-Mail senden",
  "text": "Wollen Sie die E-Mail wirklich senden?",
  "type": "warning",
  "showCancelButton": true
}, function() {
  …
});

Mit der Option „showCancelButton“ lässt sich ein solcher „Abbrechen“-Button einbauen. Eine Funktion, die beim Klick auf den Bestätigungsbutton ausgeführt werden soll, wird als zweiter Parameter nach dem Objektliteral mit den Einstellungen übergeben.

Im Beispiel schließt ein Klick auf den „Abbrechen“-Button das Dialogfenster. Der Klick auf den „OK“-Button führt die angegebene Funktion aus.

Verschachtelte Alerts erstellen

Ein weitere Vorteil von „SweetAlerts“ ist die Möglichkeit, Alerts zu verschachteln. So lässt sich das obige Beispiel sehr einfach um zwei weitere Alerts ergänzen, die dann geöffnet werden, wenn auf einen der beiden Buttons – zum Abbrechen oder Bestätigen – geklickt wurde.

swal({
  "title": "E-Mail senden",
  "text": "Wollen Sie die E-Mail wirklich senden?",
  "type": "warning",
  "showCancelButton": true,
  "closeOnConfirm": false,
  "closeOnCancel": false
}, function(isConfirm) {
  if (isConfirm) {
    swal({
      "title": "E-Mail wurde versandt.",
      "type": "success"
    });
  } else {
    swal({
      "title": "E-Mail wurde nicht versandt.",
      "type": "error"
    });
  }
});

Mit „closeOnConfirm“ und „closeOnCancel“ wird zunächst dafür gesorgt, dass beim Klick auf einen Button der Alert nicht geschlossen, sondern stattdessen je nach ausgewähltem Button ein weiterer Alert ausgegeben wird.

Über eine „if“-Abfrage lässt sich feststellen, welcher Button gedrückt wurde. Die Variable „isConfirm“ im Beispiel gibt dann „true“ zurück, wenn der Button zum Bestätigen gedrückt wurde. Die beiden verschachtelten Alerts können natürlich wiederum Funktionen ausführen.

Aussehen der Alerts individualisieren

Das Standardaussehen von „SweetAlert“ ist zwar ganz schick, passt aber mitunter nicht in jedes individuelle Projekt. Grundsätzlich kann das Layout natürlich über das Stylesheet ganz nach den eigenen Vorstellungen angepasst werden. Wer sich da jedoch nicht heranwagt, kann zumindest die Farbe des Bestätigungsbuttons anpassen. Außerdem lässt sich natürlich auch die Beschriftung der einzelnen Buttons nach Gusto definieren.

swal({
  "title": "E-Mail senden",
  "text": "Wollen Sie die E-Mail wirklich senden?",
  "type": "warning",
  "confirmButtonColor": "#000000",
  "confirmButtonText": "Ja",
  "imageUrl": "icon.png",
  "imageSize": "100x100"
});

Wer die Standard-Icons ändern will, kann mit „imageUrl“ eine individuelle Grafikdatei angeben. Mit „imageSize“ definiert man zudem eine Größe, mit der die Grafik im Alert dargestellt werden soll.

„SweetAlert“ für Android und Bootstrap

Das JavaScript SweetAlert gibt es nicht nur für klassische Webprojekte, sondern auch für Android-Apps. Außerdem gibt es eine spezielle Variante, die zusammen mit Bootstrap genutzt werden kann. Alle Varianten stehen unter der MIT-Lizenz und können somit kostenlos für eigene Projekte eingesetzt werden.

(dpe)