SweetAlert2
Sweet Alert2 ist eine ansprechende und editierbare Open-Source-Popup-Bibliothek, die in Javascript geschrieben ist.
Mit seiner einfachen Integration, seinem Design und seiner Funktionalität wird es auf vielen Websites aktiv genutzt und ständig aktualisiert und weiterentwickelt.
Sweetalert2 macht die Arbeit sehr einfach für Fehler- und Bestätigungsmeldungen nach einer Transaktion auf Webseiten, Schaltflächen in Formularfeldern oder Popup-Meldungen nach jedem Ereignis.
Die standardmäßige Popup-Meldung der Javascript-Seite des Browsers ist primitiver, wie im Beispiel unten. Die Popup-Nachricht von Sweet Alert2 hingegen ist eine ansprechendere und auffälligere Struktur.
Importieren Sie SweetAlert2-Codes
Damit die Codes in der Bibliothek aktiviert werden, muss das folgende Skript zur Website hinzugefügt werden.
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>Oder Sie können CSS- und JS-Codes separat mit den folgenden Skripten hinzufügen.
CSS-Code zum Einfügen zwischen <head></head>-Tags:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">Skriptcode, der der Seite hinzugefügt werden soll (das Hinzufügen am Ende der Seite ist im Hinblick auf die Geschwindigkeit der Website von Vorteil):
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>So verwenden Sie Sweet Alert2
Basic
Nur ein Popup mit einer einfachen Nachricht.
Swal.fire('Any fool can use a computer')
Text mit Titel
Pop-Nachricht mit Titel und Beschreibungstext.
Swal.fire(
'Junior to Expert',
'juniortoexpert.com',
'success'
)Das Symbol auf dem Popup, das sich mit dem im Feld „Erfolg“ eingegebenen Wert öffnet, wird bestimmt. Es gibt 5 verschiedene Symboloptionen wie ‘success’, ‘error’, ‘warning’, ‘info’, ‘question’.
Bild-Popup
Nachrichtentyp, der ein Bild in einem Popup enthält. Das Attribut “imageURL” gibt den Link des Bildes an, “imageWidth” und “imageHeight” die Breite-Höhe des Bildes und “imageAlt” das Alt-Tag des Bildes.
Swal.fire({
title: 'Junior to Expert!',
text: 'juniortoexpert.com Sweet Alert2',
imageUrl: 'https://juniortoexpert.com/wp-content/uploads/juniortoexpert.jpeg',
imageWidth: 400,
imageHeight: 400,
imageAlt: 'Junior to Expert',
})
Popup mit auf der Seite angegebener Position
Mit dem Wert “position” kann das auf der Seite geöffnete Popup an der angegebenen Position platziert werden. Werte, mit denen das Popup-Fenster auf der Seite positioniert werden kann;
- “top”,
- “top-start”,
- “top-end”,
- “center”,
- “center-start”,
- “center-end”,
- “bottom”,
- “bottom-start”,
- “bottom-end”
Swal.fire({
position: 'top-start',
icon: 'success',
title: 'Junior to Expert',
showConfirmButton: false,
timer: 1500
})Mit dem Wert timer: kann die Dauer des sich öffnenden Popup-Fensters bestimmt werden. Da die Fensterschaltfläche nicht geschlossen werden muss, da es einen Timer gibt, wird die Schaltfläche mit dem Wert showConfirmButton: false deaktiviert.
Popup mit hinzugefügtem benutzerdefiniertem HTML
Das angegebene HTML-Setup kann in dem Popup-Fenster platziert werden, das mit dem Wert html: geöffnet wird.
Swal.fire({
title: 'Junior to Expert',
icon: 'info',
html:
'Sweet Alert2 Javascript pop-up library ' +
'<a href="https://juniortoexpert.com">juniortoexpert.com</a>',
showCloseButton: true,
showCancelButton: true
})Genehmigungs-Popup
Pop-up-Typ, der vom Benutzer eine Bestätigung für eine Aktion erhält.
Swal.fire({
title: 'Are you sure?',
text: "You cannot undo this action!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, I am sure!'
}).then((result) => {
if (result.isConfirmed) {
Swal.fire(
'Deleted!',
'The file you approved has been deleted.',
'success'
)
}
})Animiertes Pop-Up
Die Verwendung der Animation beim Öffnen und Schließen des Popup-Fensters wird mit den Werten showClass und hideClass bereitgestellt.
Swal.fire({
title: 'Junior to Expert',
showClass: {
popup: 'animate__animated animate__fadeInDown'
},
hideClass: {
popup: 'animate__animated animate__fadeOutUp'
}
})Note: Animation funktioniert mit Animate.css-Unterstützung, Animation wird nicht aktiviert, ohne Animate.css-Codes zur Seite hinzuzufügen.
Sweetalert2-Symbole
Die “icon:”-Eigenschaftsvariablen “success”, “error”, “warning”, “info”, “question” werden im Codefeld verwendet, um Icons wie folgt in Popup-Meldungen anzugeben.
Erfolg
Fehler
Warnung
Die Info
Frage
Verweise: https://sweetalert2.github.io/