HTML/Tutorials/dialog

Das Element dialog repräsentiert einen Teil einer Anwendung, mit dem der Benutzer interagiert, um bestimmte Aufgaben auszuführen. Beispielhafte Anwendungsfälle sind Dateiauswahl- oder Objekt-Eigenschaft-Inspektoren, Newsletter-Anmeldungsformulare sowie die Anzeige von Status- und Fehlermeldungen. Üblicherweise werden Dialoge im Vordergrund einer Seite geöffnet, weil sie in der Regel die volle Aufmerksamkeit des Benutzers verlangen.

• 
• 
• 
• 
• 
• 

Details: caniuse.com

Beispiel ansehen …

<dialog open id="dialog"> <h2>Anmeldung</h2> <form method="dialog"> <label for="email">Bitte geben Sie Ihre E-Mail-Adresse an: </label><input id="email" type="email" /> <button id="Anmeldung" value="anmelden">Anmelden</button> <button id="Abbruch">Abbrechen</button> </form> </dialog>

ansehen …

Dialoge können Formulare enthalten. Entweder gewöhnliche, die zu einem GET oder POST-Request an den Server führen und die Seite neu laden, oder spezielle Dialog-Formulare. Mittels <form method="dialog"> erstellen Sie ein Formular, dessen submit-Buttons nicht die Seite an den Server senden, sondern lediglich den Dialog schließen, der dieses Form enthält. Der Inhalt des value Attributs, das sich am geklickten Button befindet, wird dabei in die returnValue Eigenschaft des HTMLDialogElement-Objekts übertragen.

Beachten Sie: In Browsern, die dialog nicht unterstützen, wird das Element und sein Inhalt trotzdem angezeigt. Submit-Buttons würden das Formular an den Server senden. Die korrekte Funktionalität lässt sich durch Einbinden eines Polyfills herstellen (siehe Weblinks).

Das open-Attribut

Das open-Attribut gibt an, ob der Dialog aktiv ist. Ist das Attribut vorhanden und enthält entweder den leeren String oder den String 'open', bedeutet dies, dass der Dialog aktiv ist. Wird das Attribut weggelassen, bedeutet dies, dass der Dialog inaktiv ist und vom Browser nicht angezeigt werden soll.

Öffnen und Schließen mittels Javascript

Das Dialog-Element besitzt sein eigenes DOM-Interface, das das Steuern von Ein-/Ausblenden und eventuellen Rückgabewerten ermöglicht. Für das Einblenden werden gleich zwei Optionen zur Verfügung gestellt:

dialog.show()

wird verwendet, um einen Dialog zu öffnen. In früheren Versionen der HTML Spezifikation war noch ein optionaler Parameter anchor enthalten um die Position des Dialogs zu beeinflussen; dieser ist entfallen.

dialog.showModal()

öffnet den Dialog ebenfalls und macht ihn zusätzlich zum vordergründigsten Dialog der Anwendung. D.h. alle interaktiven Elemente der Webseite, außer den Kind-Elementen des modal geöffneten Dialogs, werden gesperrt. Es ist zulässig, weitere modale Dialoge zu öffnen. Jedes weitere Öffnen blockiert den bereits offenen modalen Dialog.

dialog.close( [result] )

schließt einen Dialog und weist einen eventuellen Rückgabewert zu, der mit dem optionalen Parameter result übergeben werden kann.

dialog.returnValue

liefert den Rückgabewert, der zuvor mit dialog.close gesetzt wurde. Wurde dort kein Rückgabewert angegeben, wird stattdessen der leere String zurückgegeben.

Beachten Sie: Wird ein Dialog nicht über den Aufruf der close-Methode geschlossen, sondern durch Drücken der Esc-Taste, behält die returnValue Eigenschaft ihren Wert.

Beispiel ansehen …

  var startbutton = document.getElementById("start"),
	  dialog = document.getElementById('dialog'),
	  Anmeldung = document.getElementById("Anmeldung"),
	  Abbruch = document.getElementById("Abbruch");
	  
	  startbutton.addEventListener('click',zeigeFenster);
	  Anmeldung.addEventListener('click',schließeFenster);
	  Abbruch.addEventListener('click',schließeFenster);

	
	function zeigeFenster() {
	  dialog.showModal();
	}

    function schließeFenster(){
	  dialog.close(); 
    }

ansehen …

In diesem Beispiel wurde das open-Attribut entfernt. Erst ein Klick auf startbutton öffnet die Dialog-Box. Dabei wird durch das Pseudoelement ::backdrop der Seitenhintergrund mit einem durchscheinenden Overlay verdunkelt:

dialog::backdrop { 
  background: rgba(0,0,0,0.6); 
}

Ein Klick auf die Buttons schließt das Dialog-Fenster wieder.

Öffnen und Schließen mittels CSS

Wie bereits erwähnt, es ist auch möglich, Dialoge mittels CSS zu steuern. Dieses Verhalten ist wünschenswert, wenn man auch Benutzern mit deaktiviertem Javascript die Möglichkeit bieten möchte, den Dialog zu benutzen.

Voraussetzung dafür ist, dass das Dialog-Element kein open-Attribut enthält. Dadurch wird ein Modus ausgelöst, der es erlaubt, die Bedienung an andere Programmschichten zu übertragen.

Um den Dialog zu öffnen, machen wir von der :target-Pseudoklasse Gebrauch.

Beispiel

dialog:target { display: block; }

Ob ein Dialog das aktuelle Ziel ist, wird über den URI-Hash bestimmt, das ist der Teil des URIs, der dem Doppelkreuz (#) folgt. Ist dieser identisch mit der ID des dialog-Elements, kommt die Pseudoklasse :target zum Tragen.

Es ist folglich notwendig, einem Dialog-Element eine ID zuzuweisen, damit der Dialog über CSS gesteuert werden kann.

Beispiel

<a href="#meinDialog">Dialog Öffnen</a><a href="#">Dialog Schließen</a> <dialog id="meinDialog"> Hallo, ich bin ein Dialog, der über CSS geöffnet wurde. </dialog>

Ein Klick auf den Link "Dialog Öffnen" sorgt dafür, dass der Dialog zum aktuellen Browsing-Ziel wird, damit erscheint er sichtbar. Ein Klick auf den Link "Dialog Schließen" nimmt die :target-Psedoklasse vom Dialog wieder weg und macht ihn dadurch wieder unsichtbar.

Beachten Sie, dass diese Variante die Nebenwirkung hat, dass beim Schließen des Dialogs wieder zum Seitenanfang gesprungen wird.
Der Schließen-Dialog könnte aber auch auf ein anderes Ziel, etwa eine unsichtbare hr unterhalb des Dialogs verweisen.

Beispiel

<a href="#meinDialog">Dialog Öffnen</a><a href="#linie">Dialog Schließen</a> <dialog id="meinDialog"> Hallo, ich bin ein Dialog, der über CSS geöffnet wurde. </dialog> <hr id="linie">

Ein Klick auf den Link "Dialog Öffnen" sorgt dafür, dass der Dialog zum aktuellen Browsing-Ziel wird, damit erscheint er sichtbar. Ein Klick auf den Link "Dialog Schließen" schließt den Dialog und verweist auf die unterhalb der Dialog-Box befindliche, unsichtbare Linie.

Siehe auch

• Referenz: dialog
• JavaScript/Tutorials/zugängliche Dialog-Box (die auch mit der Tastatur bedienbar ist)
• JavaScript/Tutorials/Eigene modale Dialogfenster

Weblinks

• Meet the New Dialog Element
• Dialog-Polyfill des Google Chrome Teams