# Modal

A modal is a popup that can be displayed in the center of your page.

Once you’ve added your modal element, click “Edit Modal” to open up the popup area to build the contents.

Usually, you need to add [interactions](https://docs.acho.io/app-builder/app-construction/interactions) to open and close model, see [#displaying-a-modal](#displaying-a-modal "mention")

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FfX5xjdjorqXVPolO8ft0%2Fimage.png?alt=media&#x26;token=7c4d2efa-311d-4b89-86b3-d3bd97ee4f3d" alt=""><figcaption></figcaption></figure>

## Properties

![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2F6IoZ5q8lCekBO9MsMhnv%2Fimage.png?alt=media\&token=974e8240-fc11-4f94-b00d-491d4b9ca701)

**z-index:** Set the z-order (stack order) of a positioned element. It is used to make sure the modal is displayed on top.

**Show mask:** Determines whether you want to darken the page when the modal is open.

**Show dismiss button:** Display the close button at the top right of the modal.

**Close modal after clicking on mask:** Enable this option to close the modal when a user clicks outside of it.

See [tooltip](https://docs.acho.io/app-builder/app-construction/elements/tooltip "mention") for tooltip configurations.

## Displaying a modal

To trigger the modal to open, set up an [interaction](https://docs.acho.io/app-builder/app-construction/interactions) on another element, such as a button.

Here is an example for a button click to trigger the modal to open.

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2F2HOZj2jbrwEq5b4qPU82%2Fimage.png?alt=media&#x26;token=e9905408-b0b4-45aa-9559-57150861f033" alt=""><figcaption></figcaption></figure>

## Supported Events

**Open Modal:** Triggered when a user opens the modal.

**Close Modal:** Triggered when a user closes the modal.

## Supported Actions

**Open Modal:** Display modal on the screen.

**Close Modal:** Close modal.

**Set Data:** Change element data. See [data-store](https://docs.acho.io/app-builder/app-construction/data-store "mention").

**Set Loading:** Set loading animation. See [set-loading-animations](https://docs.acho.io/app-builder/popular-use-cases/set-loading-animations "mention").

{% hint style="info" %}
Visit [interactions](https://docs.acho.io/app-builder/app-construction/interactions "mention") for more on events and actions.
{% endhint %}