Gestalten Sie atemberaubende CSS-Modal-Dialoge und Popups mit Live-Vorschau. Passen Sie Animationen, Stile, Größen, Hintergrundeffekte und Buttons an — kopieren Sie das generierte CSS und HTML sofort.
Klicken Sie auf "Modal Öffnen", um den Dialog in Aktion zu sehen
Modal-Dialoge (auch Popups, Lightboxes oder Dialoge genannt) sind wesentliche UI-Komponenten zum Bestätigen von Aktionen, Anzeigen zusätzlicher Informationen oder Sammeln von Benutzereingaben, ohne die aktuelle Seite zu verlassen. Ein gut gestalteter Modal verbessert die Benutzererfahrung, indem er den Kontext beibehält und fokussierte Inhalte überlagert. Dieser Generator erstellt reine CSS-Modals mit sanften Animationen, die leichtgewichtig, barrierefrei und vollständig anpassbar sind.
Das Modal-Styling und die Animationen sind reines CSS. Für das Öffnen/Schließen ist minimales JavaScript in der HTML-Ausgabe enthalten. Sie können es problemlos mit Ihrem eigenen JavaScript oder Framework integrieren.
Ja! Sie können Titel und Inhaltstext im Generator bearbeiten, und die HTML-Ausgabe spiegelt Ihren benutzerdefinierten Inhalt wider. Sie können den Inhalt auch durch beliebiges HTML ersetzen.
Ja! Alle Modals sind mit responsivem CSS erstellt. Sie passen sich automatisch an mobile Bildschirme an und respektieren Sicherheitsbereiche.
Kopieren Sie den CSS- und HTML-Code und fügen Sie ihn in Ihr Projekt ein. Das Modal verwendet CSS-Custom-Properties für einfaches Theming. Passen Sie die Variablen an Ihr Design-System an.
Ja! Die CSS-Ausgabe enthält eine Custom Property für die Animationsdauer. Sie können die --modal-duration-Variable anpassen, um Animationen schneller oder langsamer zu machen.