So erstellen Sie eine JavaScript-Warnbox oder ein Popup-Fenster

Popup-Felder (oder Dialogfelder) sind modale Fenster, mit denen der Benutzer benachrichtigt oder gewarnt oder Eingaben vom Benutzer erhalten werden.

Popup-Felder verhindern, dass der Benutzer auf andere Aspekte eines Programms zugreift, bis das Popup geschlossen wird. Sie sollten daher nicht überbeansprucht werden.

In JavaScript werden drei verschiedene Arten von Popup-Methoden verwendet: window.alert (), window.confirm () und window.prompt ().

Aufmerksam

Die Warnmethode zeigt Nachrichten an, bei denen der Benutzer keine Antwort eingeben muss. Sobald diese Funktion aufgerufen wird, wird ein Warndialogfeld mit der angegebenen (optionalen) Meldung angezeigt. Benutzer müssen die Nachricht bestätigen, bevor die Warnung verschwindet.

Beispiel:

window.alert("Welcome to our website");

Beispiel für einen MDN-Alarm

Bestätigen

Die Bestätigungsmethode ähnelt der window.alert(), zeigt jedoch auch eine Schaltfläche zum Abbrechen im Popup an. Die Schaltflächen geben boolesche Werte zurück: true für OK und false für Cancel.

Beispiel:

var result = window.confirm('Are you sure?'); if (result === true) { window.alert('Okay, if you're sure.'); } else { window.alert('You seem uncertain.'); }
MDN-Bestätigungsbeispiel

Prompt

Die Eingabeaufforderungsmethode wird normalerweise verwendet, um Texteingaben vom Benutzer abzurufen. Diese Funktion kann zwei Argumente annehmen, die beide optional sind: eine Nachricht, die dem Benutzer angezeigt werden soll, und einen Standardwert, der im Textfeld angezeigt werden soll.

Beispiel:

var age = prompt('How old are you?', '100');

Beispiel für eine MDN-Eingabeaufforderung

Andere Designoptionen:

Wenn Sie mit den Standard-JavaScript-Popups nicht zufrieden sind, können Sie sie in verschiedenen UI-Bibliotheken ersetzen. Zum Beispiel bietet SweetAlert einen guten Ersatz für Standard-JavaScript-Modalitäten. Sie können es über ein CDN (Content Delivery Network) in Ihren HTML-Code aufnehmen und mit der Verwendung beginnen.

Die Syntax lautet wie folgt: swal(title, subtitle, messageType)

swal("Oops!", "Something went wrong on the page!", "error");

Der obige Code erzeugt das folgende Popup:

SweetAlert-Beispiel

SweetAlert ist keineswegs der einzige Ersatz für Standardmodale, aber es ist sauber und einfach zu implementieren.

Mehr Informationen:

  • MDN window.alert ()
  • MDN window.confirm ()
  • MDN window.prompt ()