Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/de/docs/Web/API/HTMLDialogElement/requestClose below:

HTMLDialogElement: requestClose() Methode - Web-APIs

Baseline 2025

Newly available

Die requestClose()-Methode der HTMLDialogElement-Schnittstelle fordert die Schließung des <dialog> an. Ein optionaler String kann als Argument übergeben werden, um den returnValue des Dialogs zu aktualisieren.

Diese Methode unterscheidet sich von der HTMLDialogElement.close()-Methode, da sie ein cancel-Ereignis auslöst, bevor das close-Ereignis ausgelöst wird. Autoren können Event.preventDefault() im Handler für das cancel-Ereignis aufrufen, um zu verhindern, dass der Dialog geschlossen wird.

Diese Methode zeigt dasselbe Verhalten wie der interne Schließ-Wächter des Dialogs.

requestClose()
requestClose(returnValue)

returnValue Optional

Ein String, der einen aktualisierten Wert für den HTMLDialogElement.returnValue des Dialogs darstellt.

Keiner (undefined).

Das folgende Beispiel zeigt einen einfachen Knopf, der beim Anklicken ein <dialog> mit einem Formular öffnet, über die showModal()-Methode. Einmal geöffnet, können Sie auf die X-Schaltfläche klicken, um die Schließung des Dialogs anzufordern (über die HTMLDialogElement.requestClose()-Methode), oder das Formular über die Bestätigen-Schaltfläche absenden.

<!-- Simple pop-up dialog box, containing a form -->
<dialog id="favDialog">
  <form method="dialog">
    <button type="button" id="close" aria-label="close" formnovalidate>
      X
    </button>
    <section>
      <p>
        <label for="favAnimal">Favorite animal:</label>
        <select id="favAnimal" name="favAnimal">
          <option></option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select>
      </p>
    </section>
    <menu>
      <button type="reset">Reset</button>
      <button type="submit">Confirm</button>
    </menu>
  </form>
</dialog>

<menu>
  <button id="updateDetails">Update details</button>
</menu>

const updateButton = document.getElementById("updateDetails");
const closeButton = document.getElementById("close");
const dialog = document.getElementById("favDialog");

// Update button opens a modal dialog
updateButton.addEventListener("click", () => {
  dialog.showModal();
});

// Form close button requests to close the dialog box
closeButton.addEventListener("click", () => {
  dialog.requestClose("animalNotChosen");
});

function dialogShouldNotClose() {
  // Add logic to decide whether to allow the dialog to close.
  // Closing prevented by default
  return true;
}

dialog.addEventListener("cancel", (event) => {
  if (!event.cancelable) return;
  if (dialogShouldNotClose()) {
    console.log("Closing prevented");
    event.preventDefault();
  }
});

Wenn die "X"-Schaltfläche type="submit" wäre, würde der Dialog geschlossen, ohne dass JavaScript erforderlich wäre. Eine Formularübertragung schließt das <dialog>, in dem es eingebettet ist, wenn die Methode des Formulars dialog ist, sodass keine "Schließen"-Schaltfläche erforderlich ist.

• Das HTML-Element, das diese Schnittstelle implementiert: <dialog>.

Diese Seite wurde automatisch aus dem Englischen übersetzt.

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