# How to Create a Modal/Popup Window
*Skill Level: Beginner*
## **Before You Begin**
* Ensure you know the basics of [Screen and Components](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/component-basics) and [Actions](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/action-basics)
* 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
{% tabs %}
{% tab title="Simple" %}
**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](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/component-basics/marketplace-components/lottie-files), etc. For help on this step, be sure to read over the [Component Basics](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/component-basics/design-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.
{% endtab %}
{% tab title="In-Depth" %}
**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](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/component-basics/design-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](https://help.adalo.com/~/revisions/kmzOxqjy7C9sXGVjDKKb/component-basics/how-to-create-and-edit-forms-and-fields).
**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!
{% endtab %}
{% tab title="Video" %}
{% embed url="" %}
{% endtab %}
{% endtabs %}
## 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](https://previewer.adalo.com/f47b14e7-44b4-4de7-a820-afccd4cd55d1).
For lots of example modals, be sure to check out our [Modals cloneable kit](https://www.adalo.com/cloneables/modals-popups)!
## 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](https://www.adalo.com/cloneables/modals-popups)!
* 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.