In this guide, we will show you how to build a dialog.
Interactive prototype - click to interact:
As a reference, this will be our final structure:
First let’s create the basic elements.
We need a container Lightbox .
If you are using elements with z-index on your screen, you also need to set the z-index for the Lightbox to a value bigger than the one you are using on other elements.
Also we need another container Dialog which needs to be placed inside the Lightbox container. Apply styling as you like. This should now look something like this:
Let's move on adding some more elements to the dialog itself.
We add another container Header inside the Dialog . We set the width to stretch and the height to 50px.
In there we put a Headline text element which we set the width to stretch and we add an Icon for closing the dialog later on.
Apply styling as needed.
Finally, we add a Content container to the dialog. Width and height should be set to stretch.
You can add some elements to the content if you like to. If you decide to do so, you can change the height of the Dialog element to shrink so it adapts to the content.
We start by making a widget out of the Icon. This is needed, because we want to have an interaction on this element later on. You can add states if you like to.
Next we create a widget out of the Lightbox .
To be able to trigger the Dialog we add another element first. Just create a rectangle Button with a text element inside.
Since we need a similar interaction for closing the dialog, copy the interaction you just created and paste it to the Icon button. The only thing we need to change is the state, selected Collapsed instead.
Now it's time to test your interaction. If everything works accordingly, we now take care of the animations.
Basically there are 2 approaches for this. We can animate the states ourselves, but for this we need to set all the required properties. For this reason we choose the second option, using effects.
One advantage of using effects is that we can combine different animations. For example, for the lightbox we only want a fade in, but for the dialog we use a slide in effect from the bottom.
Lightbox fade in
Dialog slide in
Since the second animations should be applied to another element we:
Now we should have working animations when clicking on the Button . We need similar interactions for the Icon Button.
Lightbox fade out
The order of the actions is important here. Make sure that in these cases the change to the collapsed state occurs after the effect. Otherwise, the effect will not be executed because the element is already collapsed.
Dialog slide out
Congratulation, you just build your own modal dialog with animations!