# 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](/app-builder/app-construction/interactions.md) to open and close model, see [#displaying-a-modal](#displaying-a-modal "mention")

<figure><img src="/files/mNaOYyQtdX5mOQT2DiZl" alt=""><figcaption></figcaption></figure>

## Properties

![](/files/dc11qO7JToxcqOnpdfzH)

**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](/app-builder/app-construction/elements/tooltip.md) for tooltip configurations.

## Displaying a modal

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

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

<figure><img src="/files/Qnze1wft3tZYslD6MpLr" 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](/app-builder/app-construction/data-store.md).

**Set Loading:** Set loading animation. See [Set loading animations](/app-builder/popular-use-cases/set-loading-animations.md).

{% hint style="info" %}
Visit [Interactions](/app-builder/app-construction/interactions.md) for more on events and actions.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.acho.io/app-builder/app-construction/elements/web-elements/modal.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.