> For the complete documentation index, see [llms.txt](https://docs.realmacsoftware.com/elements-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.realmacsoftware.com/elements-docs/using-elements/components/navigation-and-interaction/modal.md).

# Modal

Display focused content in an overlay above the current page

The Modal component displays content above the current page with a configurable backdrop. It is useful for forms, announcements, image or video presentations, sign-up prompts, and other content that needs temporary focus.

A Modal has separate trigger and content drop zones. Add a Modal Close component anywhere inside the content to give visitors an explicit way to dismiss it.

{% embed url="<https://youtu.be/Ye1Eyfyh3DE?si=LQiriRcrp0urI0VU>" %}

### How to Use Modal

You’ll find Modal and Modal Close under **Interactive** in the Components list.

1. Drag **Modal** onto the page.
2. Add a Button, Image, or other suitable trigger to its trigger drop zone.
3. Enable **Settings → Show** while building the modal content.
4. Add content to the modal and include a **Modal Close** component.
5. Configure placement, transition, and overlay.
6. Disable Show and preview the open and close behaviour in a browser.

### Component Settings

#### Settings

**Show** displays the modal in Edit mode. It is off by default and does not force the published modal to remain open.

**Auto Open**

* **Never** — Opens only from its trigger. This is the default.
* **Page Load** — Opens when the page loads.
* **After Delay** — Opens after the specified number of Seconds.
* **Exit Intent** — Opens when pointer movement suggests the visitor is leaving the page.

**Seconds** appears for After Delay and defaults to 0.

#### Transition

**Style** offers Fade, Zoom, Slide Left, Slide Right, Slide Up, or Slide Down. Fade is the default.

**Duration** sets the animation length in milliseconds and defaults to 300.

#### Trigger

**Cursor** controls the pointer shown over the trigger: Default, Pointer, Help, or Zoom In. Default is selected initially.

#### Content

**Horizontal** places modal content at Start, Centre, or End and defaults to Centre.

**Vertical** uses the same positions and also defaults to Centre.

#### Overlay

**Color** defaults to Surface 50 and **Opacity** to 15%. **Blur** softens the page behind the modal.

#### Modal Close

The Modal Close component closes its parent Modal when activated. Its **Cursor** can be Default, Pointer, or Zoom Out and defaults to Default.

You can add more than one Modal Close component—for example, an icon in the top-right and a Cancel button below a form.

### Accessibility

Provide an obvious close control, keep it keyboard accessible, and use a clear heading inside the modal. Do not open non-essential modals automatically on every visit.

### Tips and Best Practices

* **Use Show only while editing:** Disable it before testing the real interaction.
* **Keep content focused:** A modal should have one clear purpose.
* **Test small screens:** Ensure the content fits and the close control remains visible.

### Related Components

* [Button](/elements-docs/using-elements/components/navigation-and-interaction/button.md) — Creates a clear modal trigger or close action.
* [Dropdown](/elements-docs/using-elements/components/navigation-and-interaction/dropdown.md) — Better suited to compact contextual content.
* [Image](/elements-docs/using-elements/components/content-and-media/image.md) — Includes a simpler built-in image lightbox.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.realmacsoftware.com/elements-docs/using-elements/components/navigation-and-interaction/modal.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.