Popup Fenster in Webflow

Mit Webflow lässt sich in der Webflow Entwicklung sehr einfach ein Popup Fenster, welches sich entweder nach Klick auf einen Button oder nach einer bestimmten Zeit auf der Seite öffnet, realisieren. Popup Fenster sind auch unter dem Begriff Layer, Overlay oder Modal Window bekannt.

Innerhalb des Popups lässt sich alles einbinden, was Webflow zur Verfügung stellt. Somit lässt sich einfacher Text mit Headlines und Bildern darstellen als auch die Einbindung von Formularen, z.B. für eine Newsletter Anmeldung, realisieren.

1) Struktur des Popup anlegen

Im Webflow Navigator wird an einer beliebigen Stelle innerhalb der Seitenstruktur ein DIV-Element hinzugefügt und diesem die Klasse „Popup“ hinzugefügt. Die Position des Elements wird auf fixed gesetzt und somit ist die eigentlich Position des DIV-Element innerhalb der Seitenstruktur unwichtig.

Die Style-Angaben werden auf flex, vertical, mit justify:center und align:center gesetzt. Das Attribut Position wird auf fixed und full gesetzt sowie ein Z-Index von 9999 vergeben, damit füllt das Popup den gesamten Screen und wird über allem anderen angezeigt. Anschließend kann das Popup nach Wunsch gestylt werden.

2) Popup Element hinzufügen

Dem neuen DIV-Element wird ein weiteres DIV-Element untergeordnet, das dazu dient, den Inhalt des eigentlichen Popups zu beinhalten. Diesem neuen DIV vergeben wir die Klasse „Popup Inhalt“.

Auch dieses DIV-Element erhält die Style-Angaben flex, vertical, mit justify:center und align:center sowie zusätzlich eine Wert für Width Max W:640px. Das so erstellte DIV-Element kann nun entsprechend individuell gestylt werden.

3) Popup mit Inhalt füllen

Dem erstellten DIV-Element „Popup Inhalt“ fügen wir nun einzelne HTML-Elemente wie Headline, Text, Bilder oder auch Formular-Elemente wie Input, Select oder einen Button hinzu.

Es sollte nicht vergessen werden, dem Popup noch einen Schließen-Button hinzuzufügen, damit der ursprünglichen Inhalt der Seite wieder angezeigt wird.

4) Popup automatisieren

Um das Popup Fenster anzuzeigen, müssen verschiedene Interactions hinzugefügt werden.

Als erstes muss für das DIV-Element „Popup“ ein Anfangszustand, d.h. der Zustand wenn die Seite geladen wird, zugewiesen werden. In diesem Fall ist dies der Zustand invisible unsichtbar. Im Bedienfeld „Interactions“ wird dem „Popup“ ein Pagetrigger für das Event „Page load“ hinzugefügt. Dieser Interaction wird eine Aktion „Start an animation“ hinzugefügt in der wir das Popup Fenster auf invisible setzen, sowie die Checkbox „Set as initial state“ aktivieren.

Um das Popup Fenster anzuzeigen kann nun entweder der Seite eine Schaltfläche, z.B. ein Button, hinzugefügt werden, die eine Interaction für den Klick auf den Button „Mouse click (tab)“ erhält oder das Popup „Popup“ erhält eine zweite Interaction „Page load“ in der wir eine Animation zum Anzeigen des Elements hinzufügen, die eine Verzögerung hat. Somit wird das Popup nach einer bestimmten Verweildauer auf der Seite automatisch angezeigt.

Nun ist das Popup bereit für den Einsatz und kann mit entsprechender Funktionalität, z.B. für die Darstellung eines Formular, ausgebaut werden.