JavaScript
Modals - Eingabeaufforderungen

Syntax

• Warnmeldung )
• bestätigen (Nachricht)
• Eingabeaufforderung (Nachricht [, optionalerWert])
• drucken()

Bemerkungen

Über Benutzeransagen

Benutzeransagen sind Methoden, die Teil der Webanwendungs-API sind , um Browser-Modale aufzurufen, die eine Benutzeraktion wie Bestätigung oder Eingabe anfordern.

window.alert(message)

Zeigen Sie dem Benutzer ein modales Popup mit einer Nachricht an.
Der Benutzer muss zum Schließen auf [OK] klicken.

alert("Hello World"); 

Weitere Informationen dazu finden Sie unter "Verwenden von alert ()".

boolean = window.confirm(message)

Ein modales Popup mit der bereitgestellten Nachricht anzeigen .
Bietet die Schaltflächen [OK] und [Cancel], die jeweils mit einem booleschen Wert true / false antworten.

confirm("Delete this comment?");

result = window.prompt(message, defaultValue)

Zeigen Sie ein modales Popup mit der bereitgestellten Nachricht und einem Eingabefeld mit einem optional vorgefüllten Wert an.
Gibt als result den vom Benutzer angegebenen Eingabewert zurück.

prompt("Enter your website address", "http://");

Weitere Informationen finden Sie unten in "Verwendung von prompt ()".

window.print()

Öffnet ein Modal mit Dokumentdruckoptionen.

print();

Persistent Prompt Modal

Bei Verwendung der Eingabeaufforderung kann ein Benutzer immer auf Abbrechen klicken, und es wird kein Wert zurückgegeben.
So verhindern Sie leere Werte und machen sie dauerhafter :

<h2>Welcome <span id="name"></span>!</h2>

<script>
// Persistent Prompt modal
var userName;
while(!userName) {
  userName = prompt("Enter your name", "");
  if(!userName) {
    alert("Please, we need your name!");
  } else {
    document.getElementById("name").innerHTML = userName;
  }
}
</script>

jsFiddle Demo

Bestätigen Sie, um das Element zu löschen

confirm() werden, wenn eine UI-Aktion einige destruktive Änderungen an der Seite vornimmt und besser mit einer Benachrichtigung und einer Benutzerbestätigung einhergeht - z. B. vor dem Löschen einer Beitragsnachricht:

<div id="post-102">
  <p>I like Confirm modals.</p>
  <a data-deletepost="post-102">Delete post</a>
</div>
<div id="post-103">
  <p>That's way too cool!</p>
  <a data-deletepost="post-103">Delete post</a>
</div>

// Collect all buttons
var deleteBtn = document.querySelectorAll("[data-deletepost]");

function deleteParentPost(event) {
  event.preventDefault(); // Prevent page scroll jump on anchor click
  
  if( confirm("Really Delete this post?") ) {
    var post = document.getElementById( this.dataset.deletepost );
    post.parentNode.removeChild(post);
    // TODO: remove that post from database
  } // else, do nothing
  
}

// Assign click event to buttons
[].forEach.call(deleteBtn, function(btn) {
  btn.addEventListener("click", deleteParentPost, false);
});

jsFiddle Demo

Verwendung von Alert ()

Die alert() -Methode des window zeigt ein Benachrichtigungsfeld mit einer angegebenen Meldung und einer OK- oder Abbrechen- Schaltfläche an. Der Text dieser Schaltfläche hängt vom Browser ab und kann nicht geändert werden.

Syntax

alert("Hello world!");
// Or, alternatively...
window.alert("Hello world!");

Produziert

Ein Benachrichtigungsfeld wird häufig verwendet, wenn Sie sicherstellen möchten, dass Informationen an den Benutzer gesendet werden.

Hinweis: Das Benachrichtigungsfeld entfernt den Fokus vom aktuellen Fenster und zwingt den Browser, die Nachricht zu lesen. Überfordern Sie diese Methode nicht, da der Benutzer auf andere Teile der Seite zugreifen kann, bis die Box geschlossen wird. Außerdem wird die weitere Codeausführung angehalten, bis der Benutzer auf OK klickt. (insbesondere die mit setInterval() oder setTimeout() gesetzten Timer ticken ebenfalls nicht). Das Benachrichtigungsfeld funktioniert nur in Browsern, und das Design kann nicht geändert werden.

Rückgabewert

alert gibt keinen Wert zurück

Verwendung der Eingabeaufforderung ()

Die Eingabeaufforderung zeigt dem Benutzer ein Dialogfeld an, in dem er zur Eingabe aufgefordert wird. Sie können eine Nachricht angeben, die über dem Textfeld platziert wird. Der Rückgabewert ist eine Zeichenfolge, die die vom Benutzer bereitgestellte Eingabe darstellt.

var name = prompt("What's your name?");
console.log("Hello, " + name);

Sie können prompt() einen zweiten Parameter übergeben, der als Standardtext im Textfeld der Eingabeaufforderung angezeigt wird.

var name = prompt('What\'s your name?', ' Name...');
console.log('Hello, ' + name);