Infobox/modale Dialogfenster

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Eine Dialog-Box ist ein neues Fenster, das sich über die Webseite legt, um eine Frage zu stellen, eine Eingabe abzufragen oder mehrere Optionen anzubieten. Dabei muss unterschieden werden:
  • Popover (aus dem letzten Kapitel) zeigen Benachrichtigungen oder zusätzliche Informationen. Der Nutzer kann sie beachten, aber auch normal weiterarbeiten.
  • Modale Dialogfenster erfordern wie alert() in JavaScript sofortige Aufmerksamkeit. Während sie geöffnet sind, ist die darunter liegende Webseite nicht aktiv und kann erst wiederverwendet werden, wenn die Dialog-Box geschlossen ist. Dies muss durch den Nutzer ausdrücklich bestätigt werden, was in der Regel durch Anklicken einer Schaltfläche innerhalb des Containers geschieht.

In HTML5 wurde dafür das dialog-Element eingeführt, das seit 2022 von allen Browsern unterstützt wird.

Browserunterstützung
caniuse.com

dialog - ein Offenlegungs-Widget

Das dialog-Element ist wie ein div ein Container-Element für die in der Popup-Box enthaltenen Inhalte. Standardmäßig ist das Element nicht sichtbar.

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.
dialog ohne JavaScript ansehen …
  <dialog open> <form action="#" method="dialog"> <label for="email">Bitte geben Sie Ihre Email-Adresse an: </label> <input id="email" type="email" /> <p><button id="Anmeldung">Anmelden</button> <button id="close-dialog">Abbrechen</button> </p> </form> </dialog>

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.[1]

open-Attribut

Das boolesche Attribut open 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.

Ein Blick in den Seiteninspektor zeigt folgende Festlegung im Browser-Stylesheet:

Beispiel ansehen …
/* Festlegung im Default-Stylesheet der Browser */
dialog:not([open]) {
  display: none;
}

/* Styling der geöffneten Popup-Box */
dialog[open] { 
  width: 20em; 
  background: #fffbf0; 
  border: thin solid #e7c157;
  margin: 5em auto;
}

Öffnen und Schließen mittels Javascript

Anders als bei Popover ist noch der Einsatz von JavaScript zum Öffnen und Schließen erforderlich.

Das Dialog-Element besitzt sein eigenes DOM-Interface, das das Steuern von Ein-/Ausblenden und eventuellen Rückgabewerten ermöglicht.

Öffnen

Für das Einblenden eines dialog-Elements werden gleich zwei Optionen zur Verfügung gestellt:

dialog.show()
wird verwendet, um einen Dialog zu öffnen.
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.
modales Dialogfenster ansehen …
document.getElementById("show-dialog").addEventListener("click", () => {
    document.getElementById("dialog").showModal();
});

document.getElementById("close-dialog").addEventListener("click", () => {
    document.getElementById("dialog").close();
});

In diesem Beispiel ist das dialog-Element ursprünglich geschlossen. Durch einen Klick auf den Button mit der id show-dialog wird das dialog-Element per JavaScript mit der showModal()-Methode geöffnet.

Damit die Dialog-Box die volle Aufmerksamkeit des Nutzers bekommt, wird durch das Pseudoelement ::backdrop der Seitenhintergrund mit einem durchscheinenden Overlay verdunkelt. Die dahinterliegende, eigentliche Webseite wird im Stack des Top-Layers versteckt und ist inaktiv.

Zwischen Dokument und der geöffneten Dialog-Box befindet sich nun eine durchscheinende Schicht, die einen Zugriff auf das darunterliegende Dokument solange verhindert, bis die Dialog-Box geschlossen ist.

Beispiel 
dialog::backdrop { 
  background: hsl(201 50% 40% /.5) ;
}


Empfehlung: Ändern Sie das JavaScript auf document.getElementById("dialog").show(); und beobachten Sie die Unterschiede.

modal oder nichtmodal?

Wie in der Einführung bereits erwähnt, wird die Webseite bei einem modalen Dialogfenster inaktiv. Es wäre möglich, mehrere modale Dialogfenster zu öffnen, wobei das jeweils oberste die anderen ebenfalls inaktiv werden lässt.

Empfehlung: Bitte setzen Sie modale Dialogfenster nur sparsam ein!
Es gibt nichts Schlimmeres als auf der Suche nach Informationen erst ein Cookie-Banner wegklicken zu müssen, um dann nicht auf der Webseite selbst, sondern auf der Newsletter-Anmeldung hängenzubleiben.
Technisch ist dies möglich, aber für die Nutzer der Webseite ein Grund zum Abbruch.
Denken Sie an die Benutzerfreundlichkeit (usability) Ihrer Webseite!

Schließen

Des Weiteren können Sie den dialog auch mit JavaScript schließen oder auswerten:

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 …
document.getElementById("show-dialog").addEventListener("click", () => {
    document.getElementById("dialog").showModal();
});

document.getElementById("close-dialog").addEventListener("click", () => {
    document.getElementById("dialog").close();
});

Die im dialog-Element enthaltenen Inhalte sind ursprünglich nicht sichtbar.

Erst ein Klick auf den Button mit der id show-dialog öffnet die Dialog-Box.

Ein Klick auf den close-dialogButton schließt das Dialog-Fenster wieder mit der close()-Methode.

::backdrop und :modal - Animation mit CSS

Bei modalen Dialogen ist die Webseite inaktiv, bis die Dialogbox geschlossen ist. Um dies zu kennzeichnen, wurde bereits im oberen Beispiel der Hintergrund ausge„blaut“.

Sie können den Hintergrund, aber auch das Öffnen mit CSS gestalten und auch animieren. Dabei wird häufig auf das vermeintlich Bewährte zurückgegriffen: Das Setzen und Entfernen einer Klasse. Zumindest für das Öffnen können Sie aber auch die :modal-Pseudoklasse als Selektor verwenden:

animierter Dialog ansehen …
dialog:modal { 
  width: 20em; 
  background: #fffbf0; 
  border: thin solid #e7c157;
	margin: 5em auto;
	animation: show 1s ease normal;	
} 

@keyframes show{
    from {
        transform: translateY(-110%);
    }
    to {
        transform: translateY(0%);
    }
}

dialog::backdrop {
	background: hsl(201 50% 40% /.5);
	animation: none;
}
dialog[open]::backdrop {
	animation: show-backdrop 2s ease forwards;
}

@keyframes show-backdrop {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

Die Dialog-Box wird beim Öffnen mit einer CSS-Animation von oben eingeschoben. Dies funktioniert in allen Browsern.

Das ::backdrop-Pseudoelement wird ebenfalls sanft eingeblendet. Dies funktioniert (Stand: Februar 2024) in allen Browsern außer dem Firefox. In diesem wird der Hintergrund ohne die Animation dargestellt. Eine Alternative wäre ein seitenfüllender box-shadow anstelle des ::backdrop-Elements oder ein seitenfüllendes, halbtransparentes Dialog-Element, das mit einem kleineren Kind-Element arbeitet.

Ein animiertes Schließen funktioniert (noch) nicht mit reinem CSS. Eine Alternative stellt Geckotang vor, der beim Schließen eine Klasse .hide hinzufügt, die dialog und ::backdrop ausblendet und dann nach dem transitionend die Klasse wieder entfernt. [3][4]

Beachten Sie, dass das ::backdrop-Pseudoelement von niemandem erbt, also keine in :root festgelegten custom properties übernimmt. Dies ist ärgerlich und wurde in der Spec angepasst, aber noch nicht von allen Browsern übernommen - geht aber bereits im Firefox![5]

Siehe auch

  • Bildwechsler
    • Lightbox
      • Thumbnail und Großansicht
      • Bildwechsler
     
  • Eigene modale Dialogfenster
    alert, confirm und prompt sind heute verpönt. Dieses Tutorial zeigt, wie man diese mit einem eigenen modalen Dialog nachbauen kann.
     
  • Kontextmenü
    • menu
    • contextmenu-Event
     


  • Zusammenfassung für längere Artikel
     

Weblinks

  1. ↑ WAHTWG: dialog element
  2. ↑ open-ui.org: Invokers (Explainer)
  3. ↑ <dialog> with animation by geckotang
  4. ↑ Dialogkomponente erstellen (und animieren) (web.dev)
  5. ↑ ::backdrop doesn’t inherit from anywhere (KilianValkhoff, 19 January 2023, )
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Infobox/modale_Dialogfenster&oldid=97213“