Galerie mit dialog öffnen

[Matthias Scharwies]

Guten Morgen!

Bilder im Internet/Bildwechsler

Das dialog-Element hat demgegenüber eine semantische Bedeutung mit der role="dialog" und in seinem Standardverhalten mehrere Vorteile:

• der Fokus springt bei Tastaturbedienung automatisch in den geöffneten Dialog
• der Dialog ist automatisch im top layer angelegt - ohne CSS-Festlegungen
• mit CSS kann ein ::backdrop-Pseudoelement angelegt werden, das den Inhaltsbereich verdeckt und inaktiv werden lässt; ein so genannter modaler Dialog.

Am Mittwoch auf dem Stammtisch, kam die Frage auf, ob und wie man ::backdrop animieren kann.

Ja, man kann!

Einblenden geht mit CSS ( Bei der gmeinsamen Entwicklung ist der :modal-Selektor wieder rausgeflogen)

Ausblenden nur durch Setzen einer Klasse, die beim Ende der animation/transition wieder entfernt wird.

::backdrop und :modal - Animation mit CSS

Irgendwann setze ich es auch in den Bildwechsler!

Herzliche Grüße

Matthias Scharwies