# Modal

A pop-up dialog with three content slots — Header, Body, Footer. The modal opens when triggered (typically from a **Button** with the modal's ID configured) and closes when the user dismisses it or another action closes it.

## Available in

* All module types

## When to use

* Confirmation dialogs ("Are you sure you want to void this order?").
* Detail views that pop over the page (click a row in a Report Widget → see full detail in a Modal).
* Multi-step forms where each step is a pop-up.
* Category pickers, product pickers, or other selection flows that need focus.

For switching between in-page sections without overlay, use **Tabs** instead.

## Settings

| Setting            | Description                                                                                                                                                                                       |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Modal ID**       | A unique identifier for this modal. Other blocks (typically Buttons) reference this ID to open or close the modal. Hidden in Modal-type modules — there the ID comes from the module page itself. |
| **Modal Size**     | Width: Small, Medium, Large, Extra Large, or Full Width. Default: Medium.                                                                                                                         |
| **Header Content** | Slot for the modal title row — usually a Heading.                                                                                                                                                 |
| **Dialog Content** | Slot for the main body — drop any blocks here.                                                                                                                                                    |
| **Footer Content** | Slot for action buttons (Cancel, Confirm, etc.).                                                                                                                                                  |

## How it works

In edit mode, the modal renders as if it's open so you can lay out its content.

At runtime, the modal stays closed until something opens it:

1. A **Button** (or **Action Button**) configured with the matching Modal ID is clicked.
2. The modal slides into view, overlaying the page.
3. The user interacts with the content, or clicks Cancel / outside / the close icon to dismiss.
4. A Button inside the modal can close it (using the **Close Modal** dropdown).

{% hint style="info" %}
For pop-up triggers and the standard open/close pattern, see the [Button](/client-admin-guide/active-workflows/getting-started/content-components/button.md) documentation — Button has dedicated **Open Modal** and **Close Modal** dropdowns that automatically populate with the modals on the current page.
{% endhint %}

## Examples

**Confirmation dialog.** Modal with *Modal ID* = "confirm-void". Header: "Confirm Void". Body: a Text block explaining consequences. Footer: two Buttons — Cancel (closeModal=confirm-void), Void (with the void action). Triggered from a Void button on the order detail page.

**Detail-on-click.** Modal with a Transaction Record inside. A Report Widget row click sets a session variable; the modal opens via an Action Button bound to that variable change.

**Category picker.** Modal containing a Category Sidebar. Trigger from a "Browse Categories" Button. Closes itself when the user picks a category.

## Related

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Button</strong></td><td>The standard trigger — has dedicated Open/Close Modal dropdowns.</td><td><a href="/pages/Abd43Qy4WbEODI3bQt1Z">/pages/Abd43Qy4WbEODI3bQt1Z</a></td></tr><tr><td><strong>Action Button</strong></td><td>For more complex modal triggering (e.g. PIN-gated open).</td><td><a href="/pages/eJnsvUn6cKd9Lt95bP9b">/pages/eJnsvUn6cKd9Lt95bP9b</a></td></tr><tr><td><strong>Tabs</strong></td><td>For in-page section switching without overlay.</td><td><a href="/pages/bmd38S9wPTO30xQjVzh5">/pages/bmd38S9wPTO30xQjVzh5</a></td></tr></tbody></table>


---

# 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.in8sync.com/client-admin-guide/active-workflows/getting-started/layout-components/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.