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.

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.

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.

Last updated