Dialog mit CSS-Animation

Wollen Sie mehr lesen? Dann klicken Sie auf den Button!

Anmeldung

Die Dialog-Box ist ursprünglich nicht sichtbar. Erst mit einem Klick auf den Button wird sie per JavaScript geöffnet.
Mit einem Klick auf Abbrechen oder durch Drücken der Esc-Taste können Sie das Popup wieder schließen.

Die Dialog-Box wird beim Öffnen mit einer CSS-Transition von oben eingeschoben und gleitet beim Schließen wieder hinaus. Dies funktioniert in allen Browsern.

Der Hintergrund wird ebenfalls sanft ein- und ausgeblendet.

Dies funktioniert (Stand: Februar 2024) in allen Browsern außer dem Firefox.