Das folgende Beispiel zeigt eine Schaltfläche, um einen Dialog zu öffnen. Der Dialog fragt den Benutzer, ob er einen Nutzungsbedingungen-Prompt akzeptieren möchte.
Der Dialog enthält die Schaltflächen "Akzeptieren" oder "Ablehnen": Wenn der Benutzer auf eine der Schaltflächen klickt, schlieÃt der Klick-Handler der Schaltfläche den Dialog und übergibt seine Wahl an die close()
-Funktion. Dies weist der Wahl die returnValue
-Eigenschaft des Dialogs zu.
Im close
-Ereignishandler des Dialogs aktualisiert das Beispiel den Status-Text der Hauptseite, um den returnValue
aufzuzeichnen.
Wenn der Benutzer den Dialog schlieÃt, ohne auf eine Schaltfläche zu klicken (z. B. durch Drücken der Esc-Taste), wird der Rückgabewert nicht gesetzt.
HTML<dialog id="termsDialog">
<p>Do you agree to the Terms of Service (link)?</p>
<button id="declineButton" value="declined">Decline</button>
<button id="acceptButton" value="accepted">Accept</button>
</dialog>
<p>
<button id="openDialogButton">Review ToS</button>
</p>
<p id="statusText"></p>
JavaScript
const dialog = document.getElementById("termsDialog");
const statusText = document.getElementById("statusText");
const openDialogButton = document.getElementById("openDialogButton");
const declineButton = document.getElementById("declineButton");
const acceptButton = document.getElementById("acceptButton");
openDialogButton.addEventListener("click", () => {
dialog.showModal();
});
declineButton.addEventListener("click", closeDialog);
acceptButton.addEventListener("click", closeDialog);
function closeDialog(event) {
const button = event.target;
dialog.close(button.value);
}
dialog.addEventListener("close", () => {
statusText.innerText = dialog.returnValue
? `Return value: ${dialog.returnValue}`
: "There was no return value";
});
Ergebnis
Probieren Sie aus, "Nutzungsbedingungen überprüfen" zu klicken, dann die Schaltflächen "Akzeptieren" oder "Ablehnen" im Dialog auszuwählen oder den Dialog durch Drücken der Esc-Taste zu schlieÃen und beobachten Sie die unterschiedlichen Statusaktualisierungen.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4