Blog, JavaScript / DHTML

SweetAlert.js als alert() Alternative – Schöne Fehlermeldungen mit JavaScript

WordPress Entwickler und Webdesigner

SweetAlert.js als alert() Alternative - Schöne Fehlermeldungen mit JavaScript

Jeder unter euch der sich mit JavaScript beschäftigt, dürfte die alert() Funktion genauestens kennen. Diese sorgt in JavaScript für die Ausgabe einer Meldungs-Box. Meistens handelt es sich dabei um eine Fehlermeldung.

Die Standard alert() Box in JavaScript sieht je nach Browser etwas anders aus. Im allgemeinen zählt jedoch für jede einzelne Box, egal in welchem Browser, dass diese nicht wirklich schön aussieht.

Anzeige:




SweetAlert.js möchte eine einfache und vor allem wesentlich schönere Alternative zur Standard alert() Funktion aus JavaScript sein. Meiner Meinung nach gelingt dies sehr gut.

Sind die JavaScript + CSS Dateien von SweetAlert erst einmal eingebunden, ist das Script relativ einfach zu benutzen:

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

Beispiel mit Standard alert() Funktion:

alert("Here's a message!")

Mit SweetAlert sieht der Code wie folgt aus:

swal("Here's a message!")

Nach einem ersten Vergleich sind beide Funktionen vergleichbar einfach zu verwenden. Die Ausgabe mit SweetAlert sieht jedoch um einiges schöner aus:

SweetAlert.js Screenshot
SweetAlert.js Screenshot

Neben diesem einfachen Beispiel unterstützt SweetAlert.js auch noch einige weitere Optionen, um die Darstellung von Meldungen optisch besser hervorzuheben.

SweetAlert.js Demo

Meldungen mit SweetAlert.js erstellen

Meldungen können mit SweetAlert noch etwas mehr als nur einfache Texte anzuzeigen. Es ist z.B. möglich, die Meldungen um ein Icon oder Bilder, Untertitel oder eigene Buttons zu erweitern.

Beispiel mit Untertitel:

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

Beispiel mit Icon:

swal("Good job!", "You clicked the button!", "success")
SweetAlert mit Icon
SweetAlert mit Icon

Beispiel mit Icon, Untertitel, eigenen Buttons und Callback

swal({
	title: "Are you sure?",
	text: "You will not be able to recover this imaginary file!",
	type: "warning",
	showCancelButton: true,
	confirmButtonColor: "#DD6B55",
	confirmButtonText: "Yes, delete it!",
	closeOnConfirm: false
}, function(){
	swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
Beispiel mit Icon, Untertitel, eigenen Buttons und Callback
Beispiel mit Icon, Untertitel, eigenen Buttons und Callback

SweetAlert.js Download und weitere Beispiele

Den Download von SweetAlert.js (MIT License) findet ihr auf der entsprechenden Webseite. Weiterhin sind dort noch umfangreichere Beispiele, Erklärungen sowie die API Dokumentation zu finden.

SweetAlert.js Webseite besuchen

Schlagworte zu diesem Artikel: , , , ,

Veröffentlicht von Pascal Bajorat

Pascal Bajorat ist Mediengestalter und arbeitet als Webdesigner / Webentwickler, Autor und Trainer in Berlin. In den vergangenen Jahren hat er sich vor allem auf das CMS WordPress und die Entwicklung von hochwertigen Webseiten und Sonderlösungen spezialisiert. Er hat den Webdesign-Podcast.de 2010 gegründet.

Webseite:

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden .

Der Benachrichtigungs-Dienst wird von WordPress.com (Automattic Inc., USA ) bereitgestellt. Mit der Anmeldung akzeptierst du die Datenschutzerklärung. Die Abmeldung / Abo-Verwaltung ist jederzeit über diesen Link möglich.