Wir können das Popup-Feld verwenden, um App-Benutzern eine Popup-Nachricht anzuzeigen. In diesem Tutorial lernen wir verschiedene Arten von JavaScript-Popups kennen.
Drei verschiedene Arten von Popup-Boxen werden im folgenden JavaScript bereitgestellt.
Alarmbox
Bestätigungsfeld
Prompt-Box
Nachfolgend erfahren Sie nacheinander alle Pop-up-Boxen.
Wir können die Methode window.alert() verwenden, um das Warnfeld anzuzeigen. Die Nachricht wird lediglich in einem Popup-Fenster angezeigt.
Wenn wir dem Benutzer eine Nachricht übermitteln müssen, können wir das Benachrichtigungsfeld verwenden. Wenn sich ein Benutzer beispielsweise bei der Anwendung anmeldet, wird eine Meldung wie „Sie haben sich erfolgreich angemeldet“ angezeigt.
Benutzer können Warnfelder in JavaScript anzeigen, indem sie der folgenden Syntax folgen.
alert(message)
Nachricht – Dies ist eine Nachricht, die im Warnfeld angezeigt wird.
Wenn der Benutzer in diesem Beispiel auf die Schaltfläche klickt, rufen wir die Funktion showAlert() auf. Die Funktion showAlert() verwendet die Methode alarm(), um ein Warnfeld anzuzeigen.
In der Ausgabe kann der Benutzer beobachten, dass beim Drücken der Schaltfläche das Warnfeld mit der als Parameter übergebenen Nachricht angezeigt wird. Wenn wir im Warnfeld auf die Schaltfläche „OK“ klicken, verschwindet es.
<html>
<body>
<h2> Showing the alert message using the <i> alert box. </i> </h2>
<button onclick = "showAlert()"> Show Alert Message </button>
</body>
<script>
// function to show alert
function showAlert() {
alert("This is the important message");
}
</script>
</html>
Wenn wir eine Benutzerbestätigung benötigen, können wir das Bestätigungsfeld verwenden. Beispielsweise müssen wir die Bestätigung des Benutzers einholen, bevor wir einige wichtige Daten löschen.
Wir können die Methode window.confirm() verwenden, um das Bestätigungsfeld anzuzeigen. Das Bestätigungsfeld enthält zwei Schaltflächen mit den Texten „OK“ und „Abbrechen“. Gibt „false“ zurück, wenn der Benutzer die Schaltfläche „Abbrechen“ gedrückt hat; andernfalls „true“.
Benutzer können das Bestätigungsfeld in JavaScript anzeigen, indem sie der folgenden Syntax folgen.
confirm(message);
Nachricht – Dies ist eine Bestätigungsnachricht, die im Bestätigungsfeld angezeigt wird.
Es gibt wahre und falsche boolesche Werte zurück, je nachdem, ob der Benutzer die Schaltfläche „OK“ oder „Abbrechen“ gedrückt hat.
In diesem Beispiel verwenden wir die Bestätigungsmethode () des Fensterobjekts, um das Bestätigungsfeld anzuzeigen. Darüber hinaus zeigen wir dem Benutzer unterschiedliche Meldungen auf dem Bildschirm an, je nachdem, ob er im Bestätigungsfeld auf die Schaltfläche „OK“ oder „Abbrechen“ klickt.
<html>
<body>
<h2> Showing the confirm box using the <i> confirm() </i> method.</h2>
<p id = "output"> </p>
<button onclick = "showConfirm()"> Show Confirm box </button>
</body>
<script>
let message = "Kindly confirm once by pressing the ok or cancel button!";
// function to show confirm box
function showConfirm() {
// showing the confirm box with the message parameter
let returnValue = confirm(message);
let output = document.getElementById("output");
// According to the returned boolean value, show the output
if (returnValue) {
output.innerHTML += "You pressed the ok button.";
} else {
output.innerHTML += "You pressed the cancel button.";
}
}
</script>
</html>
Eingabeaufforderungsfeld ist die dritte Möglichkeit, Popup-Nachrichten in JavaScript anzuzeigen. Eingabeaufforderungsfelder sind erweiterte Versionen von Alert() und Bestätigungsfeldern. Es zeigt eine Nachricht in einem Feld an und akzeptiert Eingaben des Benutzers. Darüber hinaus enthält es Schaltflächen „OK“ und „Abbrechen“ zum Übermitteln von Eingabewerten.
Benutzer können das Eingabeaufforderungsfeld verwenden, um Benutzereingaben in JavaScript gemäß der folgenden Syntax zu erhalten.
prompt(message, placeholder);
Wir haben die statische Methode prompt() in der obigen Syntax aufgerufen.
Nachricht – Dies ist eine Nachricht, die über dem Eingabefeld angezeigt wird.
Platzhalter – Dies ist der Text, der im Eingabefeld angezeigt wird.
Wenn der Benutzer die OK-Taste drückt, wird der Eingabewert zurückgegeben; andernfalls ist er leer.
In diesem Beispiel haben wir die Funktion takeInput() erstellt, die dem Benutzer einen Tooltip anzeigt. Wir verwenden ein Eingabeaufforderungsfeld, um den vom Benutzer eingegebenen Namen abzurufen.
Wenn der Benutzer nach Eingabe des Eingabewerts die OK-Taste drückt, zeigen wir die Eingabe des Benutzers auf dem Bildschirm an.
<html>
<body>
<h2> Showing the prompt box using the <i> prompt() </i> method. </h2>
<p id = "output"> </p>
<button onclick = "takeInput()"> Show Prompt box </button>
</body>
<script>
let message = "Enter your name";
// function to take input using the prompt box
function takeInput() {
// showing the prompt with the message parameter
let returnValue = prompt(message, "Shubham");
let output = document.getElementById("output");
if (returnValue) {
output.innerHTML += "Your good name is " + returnValue;
} else {
output.innerHTML +=
"You pressed the cancel button, or you entered the null value";
}
}
</script>
</html>
Wir haben uns in diesem Tutorial alle drei verschiedenen Popups anhand von Beispielen angesehen. Wenn wir nur eine Nachricht anzeigen müssen, können wir ein Benachrichtigungsfeld verwenden. Wenn wir nur eine Benutzerbestätigung benötigen, sollten wir ein Bestätigungsfeld verwenden. Wenn wir einen Wert eingeben oder einen Wert in einem Popup-Fenster bestätigen müssen, sollten wir ein Eingabeaufforderungsfeld verwenden.
Das obige ist der detaillierte Inhalt vonPopup-Meldungen mithilfe von Ereignissen interpretieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
JavaScript-Escape-Zeichen
So kündigen Sie die automatische Verlängerung der Taobao Money Saving Card
So verwenden Sie die Dekodierfunktion
Methode zur Erkennung toter Website-Links
Was bedeutet Jingdong Plus?
Computersprachen
So schließen Sie Port 135
Welche Vorteile bietet das Spring Boot-Framework?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
