Registrierung mit Lightbox

Mit Axure 7 haben Dynamic Panles einige neue Optionen erhalten. U.a. die Treat as Lightbox Option. Mit dieser Option lassen sich sehr schnell Lightboxen mit abgedunkeltem Hintergrund erstellen. Ein typischer Anwendungsfall ist ein Layer, der sich sich über bestimmte Elemente legen soll. In dieser Übung bauen wir als Beispiel einen Registrierungslayer.

Axure Version: 8.0
Level: Beginner
Dauer: 20 min
Themen: Axure Basics, Lightbox, Overlay, Registrierung, Treat As Lightbox

Preview:

Das Konzept

Bei Klick auf den Registrierungs-Button wird ein verstecktes Dynamic Panel sichtbar gemacht und durch die Treat as Lightbox Option wie eine Lightbox auf die Seite gelegt. Das Panel verschwindet mit Hide Panel wieder im Hintergrund, wenn man den Registrierungs-Button im Formular anklickt. Am Ende erscheint ein Bestätigungstext.

1 Vorbereitung

Zunächst baut man ein kleines Registrierungsfenster mit einem Button. Sowohl der Button als auch der Text sollten benannt werden:

Button: ‚Registrieren-Button‘

Label: ‚Registrierungstext‘

Ziehe ein Dynamic Panel über das gesamte Registrierungsfenster und nennen es ‚Registrierungsformular‘. Füge dem Panel den State ‚Formular‘ hinzu und platziere die Inhalte:

Dynamic Panel: ‚Registrierungsformular‘

Dynamic Panel ‚Registrierungsformular‘ > State ‚Formular‘

Markiere die beiden Passwortfelder und maskiere sie mit Rechtsklick > Input type > Password:

Passwortfelder maskieren

Verlasse den State wieder und verstecke das Panel mit Hidden. Lege ihn anschließend mit Back in den Hintergrund damit der Registrieren-Button klickbar ist.

Dynamic Panel mit Hidden verstecken

Dynamic Panel mit Back in den Hintergrund setzen

2 Interaktion erstellen

Markiere den Registrieren-Button und gebe ihm die OnClick Aktion Show ‚Registrierungsformular‘.
Unter More Options wählt man zusätzlich treat as lightbox und die Background Color aus.

treat as lightbox Option wählen

Der Button auf dem Formular bekommt auch eine Aktion, damit sich die Lightbox wieder schließt.
Vergebe dem Button im State ‚Formular‘ die OnClick-Aktionen Hide Panel:

OnClick > Hide Registrierungsformular

Anschließend wird das Panel mit Send to Back in den Hintergrund gesetzt:

Send Registrierungsformular to Back

Nachdem die Lightbox ausgeblendet ist, soll eine Bestätigung erfolgen. Hierfür verstecken wir mit Hide zunächst den Registrieren-Button und ändern mit Set Text den Registrierungstext: