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="post"> <label for="email">Bitte geben Sie Ihre E-Mail-Adresse an: </label><input id="email" type="email" /> </form> <button id="Anmeldung">Anmelden</button> <button id="Abbruch">Abbrechen</button> </dialog>

ansehen …

Das open-Attribut gibt an, dass der Dialog aktiv ist.

Das enthaltene Formular dient lediglich der Veranschaulichung eines Anwendungsfalls und erfüllt in diesem Beispiel keinen tieferen Zweck.

Beachten Sie: In Browsern, die dialog nicht unterstützen, wird das Element und sein Inhalt trotzdem angezeigt. Die Funktionalität des Zuklappens lässt sich aber nicht herstellen.

Das open-Attribut

Das open-Attribut gibt an, ob der Dialog aktiv sei. 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 entweder inaktiv ist oder die Logik von einer anderen Programmschicht (zum Beispiel CSS) übernommen wird.

Ö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( [anchor] )

wird verwendet, um einen Dialog zu öffnen. Der optionale Parameter anchor kann dabei einen Ausrichtungspunkt enthalten.

dialog.showModal( [anchor] )

öffnet den Dialog ebenfalls und macht ihn zusätzlich zum vordergründigsten Dialog der Anwendung.

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 noch kein Rückgabewert angegeben, wird stattdessen der leere String zurückgegeben.

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" hingegen sorgt für das Gegenteil.

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