How to Create a Modal/Popup Window

Want to make a popup window? Utilize page linking and actions to create a modal screen that's great for image viewers, confirmation screens, info popups, hints, and so much more.

Skill Level: Beginner

Before You Begin

Ensure you know the basics of Screen and Components and Actions
You do not need a paid Adalo plan to use this feature
Ensure you have at least one screen in your app
Ensure you have a component on that screen to add an action to.

Walkthrough

1.) Select the component you want to link from. In the Click Actions area, click Add Action.

2.) Select Link, then choose New Screen.

3.) Give your new modal screen a Name and choose either Blank as the screen type or you can choose the Modal template screen under the Misc section dropdown. If you chose the Modal template, skip to Step 9.

4.) Click on the screen title in the top left corner of the screen itself to select the entire screen.

5.) At the very bottom of the screen options, click on Edit Styles.

6.) Click on the Background color swatch to reveal a color picker.

7.) Use the opacity slider to set the transparency of the background to 0 by sliding it all the way to the left.

8.) Now you will need to add some components to the screen to act as the popup such as a rectangle, text, some buttons, Lottie files, etc. For help on this step, be sure to read over the Component Basics page first.

9.) Once your modal looks and reads the way you like, we need to edit the Link action we set up in Step 2. Go back to the component that links to your new modal and select the Link action. In the Transition dropdown, be sure to select Modal as the transition type.

10.) It's also usually best practice to put an X button or a Cancel option on the modal that has a Link action <- Back. Without this, user's won't be able to close the popup!

11.) You can also display modals at the bottom of a screen by positioning them at the bottom of the screen, grouping the components, clicking Edit Styles in the group, then choosing Bottom in the Fixed section.

1.) In this example, we want the user to click on an add button and be taken to a popup modal so they can add a new item to a list. Select the component you want to link from. In the Click Actions area, click Add Action. Select Link, then choose New Screen.

2.) Give your new modal screen a Name and choose either Blank as the screen type or you can choose the Modal template screen under the Misc section dropdown. If you chose the Modal template, skip to Step 9.

3.) If you chose the Blank screen option, click on the screen title in the top left corner of the screen itself to select the entire screen.

4.) At the very bottom of the screen options, click on Edit Styles.

5.) Click on the Background color swatch to reveal a color picker. Use the opacity slider to set the transparency of the background to 0 by sliding it all the way to the left.

6.) Now we need a rectangle to serve as the popup itself. Click the big plus sign in the top right , then click on Simple and drag a Rectangle onto the screen. For help on this step, be sure to read over the Component Basics page first. You can change the styles and colors to your liking.

7.) If you chose the Modal template when creating the screen, be sure to double click the rectangle to get into the group, then delete the buttons and text.

8.) Now let's use the big plus sign to add a form to our popup modal that creates an item. Click for more information about forms.

9.) We can't forget to add a back action to the form as well so the user is linked back to the homescreen after they create their item! Click on the Submit Button dropdown section in the form's settings and add a Link action that links <-Back

10.) Once your modal looks and reads the way you like, we need to edit the Link action we set up in Step 2. Go back to the component that links to your new modal and select the Link action. In the Transition dropdown, be sure to select Modal as the transition type.

11.) It's also usually best practice to put an X button or a Cancel option on the modal that has a Link action <- Back. Without this, user's won't be able to close the popup!

Example

Now you have a popup window anytime someone clicks on your component! To clone or test out the app used in this walkthrough, click here.

For lots of example modals, be sure to check out our Modals cloneable kit!

Learn More

There are lot's of different ways to apply modals/popups. You can use them as image galleries, info popups, confirmations with Lottie animations, hints, and so much more. For some great examples of modals that you can copy directly into your app, clone our Modals cloneable kit!
Be careful linking modals to and from other modals. This can sometimes create loops of data or trapping screenflows that don't let the user move forward. Modals work best when used in "there and back" type screenflows. This is where the user is taken into the modal, they do something (create, update, delete, cancel, etc.) and then are sent back to the original screen. An exception to this would be confirmation screens where the user completes a long screenflow and is shown a success screen that links them Home, for example.

PreviousHow to make a list your users can filter NextHow to create a "Favorite" button (Legacy Builder)

Last updated 1 year ago

Was this helpful?