Das Tag <dialog> wird für ein Dialogfenster oder Fenster verwendet. Zum Beispiel kann man mithilfe dieses Elements Pop-up-Nachrichte oder Formen erstellen. Voreingestellt wird das Dialogfenster nicht angezeigt, es wird mithilfe des Attributs open geöffnet.
Syntax
Das Tag <dialog> wird gepaart verwendet, sein Inhalt befindet sich zwischen den Start- (<dialog>) und Endtags (</dialog>).
Um den Inhalt des Tages anzuzeigen/auszublenden ist Javascript API notwendig.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
dialog{width:40%;}
</style>
</head>
<body>
<div>
<dialog id="DialogExample">
<p>
Es ist irgendein Text.
</p>
<button id="hide">Dialogtext schließen</button>
</dialog>
<button id="show">Dialogtext anzeigen</button>
</div>
<script type="text/JavaScript">
(function() {
var dialog = document.getElementById('DialogExample');
document.getElementById('show').onclick = function() { dialog.show();
};
document.getElementById('hide').onclick = function() { dialog.close();
};
})();
</script>
</body>
</html>Ergebnis
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| open | open | Es zeigt, dass der Dialogfenster aktiv ist und der Benutzer kann mit ihm zusammenwirken. |
The <dialog> unterschtützt Globale Attribute und Globale Eventhandler.
Browser-Support
|
|
|
|
|---|---|---|---|
| 37+ | 59+ | 6+ | 24+ |
Übe dein Wissen
Welche Aussagen über den HTML-Dialog-Tag sind korrekt?
Richtig!
Falsch!