website logo
HomepageCommunitySign up & Download for free
⌘K
USER MANUAL
User Interface
General
Styling
Color Management
Widgets
Presentation & Interaction
Interactions
Sharing & Export
Resources
JavaScript
Embedded HTML
Custom CSS
Plugins
Cloud
General
Account Registration
Projects
Prototypes
Subscription, Licensing and Billing
Single Sign-On (SSO)
Company Profile
Types of Users
User Management
Commenting
Sharing
Public Link
Embed Code
Prototype Settings
User Profile
FAQ
Tutorials
How to build
Interactive dropdown
Interactive tab bar with content
Modal dialog
Table
Input field
Upload and share prototypes
Changelog
Docs powered by archbee 
18min

Modal dialog

In this guide, we will show you how to build a dialog.

Interactive prototype - click to interact:



To follow these instructions more easily, we recommended using the same names as we do for each cell. You may download the final project file here.







Build the basic structure



As a reference, this will be our final structure:





First let’s create the basic elements.

Lightbox

We need a container Lightbox .

  • Set the background color to a transparent black
  • Set the layout to center, width and height to stretch.
  • Also we set it to float because we want it to be above all the other elements on the screen.
  • (Deactivate clip content)

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.



Dialog

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.









Creating the widgets

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 .

  • Set the Content to individual, we do this to have the flexibility to put different content inside
  • Add a custom state Collapsed where we set the visibility to collapsed







Make it interactive

To be able to trigger the Dialog we add another element first. Just create a rectangle Button with a text element inside.

  • Add a left click interaction to it
  • Change the linked cell to the Lightbox
  • Choose change state and select the Normal state

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.

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

  • Select the Button again.
  • Add another action
  • Choose Effect and select Fade in




Dialog slide in

Since the second animations should be applied to another element we:

  • Add another group
  • Link the Dialog
  • Choose Effect and select Slide in up




Now we should have working animations when clicking on the Button . We need similar interactions for the Icon Button.



Lightbox fade out

  • Select the Icon button
  • For the already existing action, change from with previous to after previous
  • Add another action
  • Choose Effect as the action and select Fade out
  • Move this action above the change state action


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

  • Add another group
  • Link the Dialog
  • Choose Effect and select Slide out down






Congratulation, you just build your own modal dialog with animations!

Why not build a Table now?













Updated 03 Mar 2023
Did this page help you?
Yes
No
UP NEXT
Table
Docs powered by archbee 
TABLE OF CONTENTS
Build the basic structure
Lightbox
Dialog
Creating the widgets
Make it interactive
Animations