From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/html/element/dialog/index.html | 206 ++++++++++++++++++++++++++++ 1 file changed, 206 insertions(+) create mode 100644 files/de/web/html/element/dialog/index.html (limited to 'files/de/web/html/element/dialog') diff --git a/files/de/web/html/element/dialog/index.html b/files/de/web/html/element/dialog/index.html new file mode 100644 index 0000000000..d08899bdad --- /dev/null +++ b/files/de/web/html/element/dialog/index.html @@ -0,0 +1,206 @@ +--- +title: +slug: Web/HTML/Element/dialog +tags: + - Dialog + - Element + - Experimentell + - HTML + - HTML interaktive Elemente + - Referenz + - Web +translation_of: Web/HTML/Element/dialog +--- +

{{ SeeCompatTable() }}

+ +

Zusammenfassung

+ +

Das HTML <dialog> element stellte einen Dialog oder eine andere interaktive Komponente, so wie ein Fenster oder Unterfenster, dar. <form> Elemente können in einen Dialog Integriert werden in dem sie mit dem Attribut method="dialog" angegeben werden. Wenn eine solches Formular übertragen (submit) wird, wird der Dialog mit dem Rückgabewert (returnValue ) des value Attributes  am benutzten Submit Button geschlossen.

+ +

Das {{cssxref('::backdrop')}} CSS pseudo-element kann benutzt werden um Elemente hinter dem <dialog> Element zu verändern; So kann beispielsweise der Hintergrund abgedunkelt werden.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesFlow content, sectioning root
Permitted contentFlow content
Tag omission{{no_tag_omission}}
Permitted parent elementsJedes Element, das flow content akzeptiert
DOM interface{{domxref("HTMLDialogElement")}}
+ +

Attribute

+ +

An diesem Element können die Globalen Attribute verwendet werden. Das tabindex Attribut darf am <dialog> Element nicht benutzt werden.

+ +
+
{{htmlattrdef("open")}}
+
Der Dialog ist nach dem Laden des Dokumentes bereits geöffnet und aktiv. Ist das Attribut nicht gesetzt, so wird der Dialog nicht angezeigt.
+
+ +

Beispiele

+ +

Beispiel 1

+ +
<dialog open>
+  <p>Greetings, one and all!</p>
+</dialog>
+
+ +

Beispiel 2

+ +
<!-- Simple pop-up dialog box, containing a form -->
+<dialog id="favDialog">
+  <form method="dialog">
+    <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 id="cancel" type="reset">Cancel</button>
+      <button type="submit">Confirm</button>
+    </menu>
+  </form>
+</dialog>
+
+<menu>
+  <button id="updateDetails">Update details</button>
+</menu>
+
+<script>
+  (function() {
+    var updateButton = document.getElementById('updateDetails');
+    var cancelButton = document.getElementById('cancel');
+    var favDialog = document.getElementById('favDialog');
+
+    // Update button opens a modal dialog
+    updateButton.addEventListener('click', function() {
+      favDialog.showModal();
+    });
+
+    // Form cancel button closes the dialog box
+    cancelButton.addEventListener('click', function() {
+      favDialog.close();
+    });
+
+  })();
+</script>
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', 'forms.html#the-dialog-element', '<dialog>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', 'interactive-elements.html#the-dialog-element', '<dialog>')}}{{Spec2('HTML5.1')}} 
+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support37{{CompatNo()}} {{bug(840640)}}{{CompatNo()}}24{{CompatNo()}}
Anchor points{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic supportAndroid Browser 37{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
Anchor points{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
+
+ +

Siehe Auch

+ + + +
{{HTMLRef}}
-- cgit v1.2.3-54-g00ecf