HTML5 wird vor allem als Basissprache für die Entwicklung von Webanwendungen weiter ausgebaut. Zu interaktiven Anwendungen gehören typischerweise auch Elemente wie Dialogboxen oder On-the-fly-Popups wie etwa ein Monatskalender zur Auswahl eines Datums.
Gegenwärtig sind solche interaktiven Elemente zwar bereits auf vielen Websites im Einsatz, doch werden sie HTML-seitig bislang fast ausschließlich mit Hilfe von div-Elementen realisiert. HTML5 spendiert jedoch ein eigenes Element dafür.
<form method="post" action="test.html"> <p><input type="button" id="logoutButton" value="Abmelden" onclick="document.getElementById('LogoutDialog').show()"></p> <dialog id="LogoutDialog"> <p>Wirklich abmelden?</p> <p><input type="submit" value="ja"><br> <input type="button" onclick="document.getElementById('LogoutDialog').close()" value="nein"></p> </dialog> </form>
Dialogbereiche können Sie ab HTML5 mit <dialog>…</dialog> auszeichnen. Das Element ist überall im normalen Fließtext erlaubt. Ferner darf es als Kindelement von Tabellenkopfzellen (th) und Definitionstermini (dt) notiert werden.
Ob ein Browser das dialog-Element kennt, merken Sie schnell daran, ob er den Inhalt des Elements per Default anzeigt oder nicht. Ein dialog-Element sollte nämlich nur dann sichtbar sein, wenn es ein Standalone-Attribut open hat, also wenn das Start-Tag die Form <dialog open> aufweist. Ansonsten sollte das Element zunächst unsichtbar sein.
Ansonsten hat das dialog-Element keine besonderen Eigenschaften. Seine eigentliche Funktionalität ist nur im Zusammenhang mit Scripting realisierbar. Das obige Beispiel zeigt einen Button mit der Beschriftung Abmelden. Klickt der Anwender darauf, wird der Script-Code ausgeführt, der im gleichen Element beim Event-Handler onclick notiert ist. Im obigen Beispiel wird mit document.getElementById('LogoutDialog') das Element mit dem id-Namen LogoutDialog angesprochen. Das ist das dialog-Element, da es in seinem Start-Tag id=“LogoutDialog“ notiert hat. Im Zusammenhang mit dem dialog-Elementobjekt wird die Methode show() aufgerufen. Diese bewirkt, dass das angesprochene dialog-Element sichtbar gemacht wird (so, als würde es ein open-Attribut erhalten).
Eine weitere Besonderheit des dialog-Elements ist es, dass der Browser es, wenn es von einem anderen Element ausgehend aktiviert (geöffnet) wird, automatisch in der Umgebung des auslösenden Ereignisses positionieren sollte, und zwar so, dass es im gedachten Ebenenstapel oberhalb der übrigen Inhalte liegt.
Anstelle der im Beispiel verwendeten Methode show() zur Anzeige des Dialogs können Sie auch showModal() verwenden. Der Unterschied ist, dass bei der Anwender bei show() weiterhin den Rest der angezeigten Seite „benutzen“ kann. Bei showModal() wird der Rest der Seite ausgegraut und ist nicht verwendbar, bis der Dialog in irgendeiner Form wieder geschlossen wird.
Im Beispiel enthält der Dialog eine Rückfrage, ob sich der Anwender tatsächlich abmelden möchte. Dazu werden zwei Buttons mit den Beschriftungen ja und nein angeboten. Der Ja-Button ist ein submit-Button für das gesamte umgebende Formular. Dieses wird also abgesendet, und es könnte ein Logout-Script dabei aufgerufen werden. Der Nein-Button ruft onclick wieder das dialog-Element auf, und zwar mit der Methode close(). Dadurch wird das Element wieder ausgeblendet, und sonst geschieht nichts weiter.
Das dialog-Element war bereits in den Anfängen von HTML5 eingeführt worden. Doch seinerzeit hatte es eine andere Bedeutung. Es sollte szenische Dialoge mit wörtlicher Rede auszeichnen. In dieser Bedeutung wurde das Element jedoch wieder verworfen. Erst später wurde es dann wieder in den Living Standard aufgenommen, und zwar mit der jetztigen Bedeutung.
Die Browser unterstützen dieses Element bislang kaum, und wenn, dann teilweise nur HTML-seitig. Chrome 27 etwa kennt das dialog-Element und das open-Attribut, nicht aber die zugehörigen DOM-Scripting-Methoden wie open() oder close().
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.