SweetAlert2 – schöne Dialoge in JavaScript

Die Standarddialoge der alert-Funktion von Java-Script sind alles andere als schön. Als einfach zu nutzende Alternative bietet sich “SweetAlert2” an.

Mit SweetAlert2 lassen sich Popup-Meldungen in Java-Script leicht realisieren. Die sehen schick aus, lassen sich konfigurieren, z.B. Design, Texte, Position und die Einbindung geht schnell von der Hand. Der Dialog erscheint mit schicker Animation und blendet den Hintergrund zudem dezent aus.

Zuerst binden wir die Java-Script Bibliothek ein:

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

Anschließend können wir im Code den Dialog aufrufen:

Swal.fire({
    title: 'Fehler!',
    text: 'es ist ein Fehler aufgetreten',
    icon: 'error',
    confirmButtonText: 'Nicht schön',
    position: 'top'
})

Hier sieht man bereits die Konfigurationsmöglichkeiten. Die Homepage bietet hier weitere Informationen. So lassen sich Text, Icon, Button und auch die Position beeinflussen.

Fazit

Deutlich besser als die klassischen Meldungen die Java-Script im Browser anzeigen lassen kann. Diese haben zudem noch den Nachteil, dass der Browser diese bei wiederholter Anzeige ignorieren kann.

Beispiel

Das Beispiel kann hier ausprobiert werden.