# Modal

## Overview

The Modal component serves as a container for a group of components displayed on button click.

<figure><img src="/files/2iJtPLeMP3pt7HZDsWBW" alt=""><figcaption></figcaption></figure>

### Properties

| Name   | Type     | Description    |
| ------ | -------- | -------------- |
| `name` | `string` | Component name |

### Methods

<table><thead><tr><th width="202.15625">Name</th><th width="168.3984375">Parameters</th><th width="100.609375">Returns</th><th>Description</th></tr></thead><tbody><tr><td><code>open</code></td><td>–</td><td><code>void</code></td><td>Open the modal window</td></tr><tr><td><code>close</code></td><td>–</td><td><code>void</code></td><td>Close the modal window</td></tr><tr><td><code>setOpenButtonDisabled</code></td><td><code>disabled: boolean</code></td><td><code>void</code></td><td>Disable or enable the open button</td></tr><tr><td><code>setValue</code></td><td><code>data: object</code></td><td><code>void</code></td><td>Set component data. Data is an object with arbitrary structure.</td></tr><tr><td><code>resetValue</code></td><td>–</td><td><code>void</code></td><td>Reset component to the initial value</td></tr><tr><td><code>validate</code></td><td>–</td><td><code>void</code></td><td>Trigger form validation</td></tr><tr><td><code>resetValidation</code></td><td>–</td><td><code>void</code></td><td>Clear validation errors</td></tr></tbody></table>

### Triggers

<table><thead><tr><th width="137.3359375">Name</th><th>Description</th></tr></thead><tbody><tr><td><strong>On Init</strong></td><td>Triggered when the component is initialized</td></tr><tr><td><strong>On Open</strong></td><td>Triggered when the modal is opened</td></tr><tr><td><strong>On Close</strong></td><td>Triggered when the modal is closed</td></tr></tbody></table>

## Working with the component

The Modal component consists of a *button* and the *modal window* itself that you can customize to suit your needs.

**Button** - you can configure button appearance, text, as well as manage its visibility or disable it based on a specific condition.

**Modal window** - you can adjust the size of the window, hide/show the modal's header, and configure modal's closing options. Inside the modal window, you can place different components or simply copy-paste any existing components in your application.\
For example, you can add a Modal to display product details and place the Detail component inside the modal window. In the *Data* field of the Detail component, you need to reference the necessary data - `{{ui.productsTable.selectedRow.data}}`.

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


---

# 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.uibakery.io/reference/working-with-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.