Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » Design » SweetAlert.js: Schickere und flexiblere Alternative zu alert()

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

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 4 Minuten
  • von Denis Potschien
  • 15. Januar 2015

Inhaltsverzeichnis

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

„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.");

sweetalert_beispiel1

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?");

sweetalert_beispiel2

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");

sweetalert_beispiel3

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.

sweetalert_beispiel4

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)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Homepage Hexxer Logo der Webdesign Agentur aus Balingen.

HOMEPAGE HEXXER

Balingen

seolist seo frankfurt logo

SEOlist.IO – SEO Agentur & SEO Freelancer Frankfurt

Frankfurt am Main

Logo für Opus Marketing aus Bayreuth. Links zu sehen ist eine schwarze Schachfigur, der schwarzer Turm. Daneben in Großbuchstaben die Buchstaben OPUS.

OPUS Marketing

Bayreuth

WP Agentur

wp-agentur.de | WordPress-Agentur

Köln

orange services webdesign agentur esslingen logo

Orange Services

München

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Foto der Inhaberin einer Social Media Agentur, umrahmt von einem Laptop und zur Linken zwei Bewertungen der Agentur.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑