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
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.
Inhaltsverzeichnis
Das open-Attribut[Bearbeiten]
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[Bearbeiten]
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.
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();
}
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[Bearbeiten]
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.
Es ist folglich notwendig, einem Dialog-Element eine ID zuzuweisen, damit der Dialog über CSS gesteuert werden kann.
Der Schließen-Dialog könnte aber auch auf ein anderes Ziel, etwa eine unsichtbare
hr
unterhalb des Dialogs verweisen.Siehe auch[Bearbeiten]
- Referenz: dialog
- JavaScript/Tutorials/zugängliche Dialog-Box (die auch mit der Tastatur bedienbar ist)
- JavaScript/Tutorials/Eigene modale Dialogfenster
:target
zum Tragen.