> For the complete documentation index, see [llms.txt](https://docs.poweredbybackstage.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.poweredbybackstage.com/modules/modal.md).

# Modal

![](https://2635135911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9NyC60xfSabdCmQW0heP%2Fuploads%2FRWfJ5L4iHyRQ8my95MJu%2FModal%20module.gif?alt=media\&token=ed16bc3b-d4f1-4f7a-87ae-ecb87ff6da8d)

## Overview

The **Modal module** allows for over-page container elements.

## Properties

[**Size**](https://chakra-ui.com/docs/overlay/modal#modal-sizes) (required)\
*Dropdown*\
Sets the sizing of the modal module. The following options can be used:

* `md`
* `xs`
* `sm`
* `lg`
* `xl`
* `2xl`
* `3xl`
* `4xl`
* `5xl`
* `6xl`
* `full`

[**Motion Preset**](https://chakra-ui.com/docs/overlay/modal#changing-the-transition) (required)\
*Dropdown, default slideInBottom*\
Sets the transition animation of the Module. The following options are available:

* `slideInBottom`
* `slideInRight`
* `scale`
* `none`

**Lock Body Scroll**\
*Checkbox, default `disabled`*\
If enabled, the body scroll will be locked when modal is open.

**Is Centered**\
*Checkbox, default `disabled`*\
If enabled, the modal will be centered vertically on screen.

**Close On Overlay Click**\
*Checkbox, default `disabled`*\
If enabled, the modal will close when the overlay is clicked.

**Return Focus on Close**\
*Checkbox, default `disabled`*\
If enabled, the modal will return focus to the element that triggered it when it closes.

**Preserve Scrollbar Gap**\
*Checkbox, default `disabled`*\
If enabled, the `padding-right` will be applied to the body element that's equal to the width of the scrollbar.

### Modal Content

[**Background Color**](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)\
*String - Valid color string (`white`) or hex code (`#FFFFF`)*\
Sets Modal background color.

[**Border Radius**](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)\
*String*\
Sets the Modal border radius (in px or em).  Example: `5px` or `25%`

[**Top**](https://developer.mozilla.org/en-US/docs/Web/CSS/top)\
*String*\
If defined, sets the position from top of viewport if `isCentered` is not checked.

**Custom Styles** (required)\
*String, css style property input*\
Can apply additional CSS styles to customize the modal.

### Modal Overlay

[**Background Color**](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)\
*String - Valid color string (`white`) or hex code (`#FFFFF`)*\
Sets the background color for the modal overlay.

**Custom Styles** (required)\
*String, css style property input*\
Can apply additional CSS styles to customize the modal overlay.

### Modal Body

[**Background Color**](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)\
*String - Valid color string (`white`) or hex code (`#FFFFF`)*\
Sets the background color for the modal body.

[**Padding**](https://developer.mozilla.org/en-US/docs/Web/CSS/padding)\
*String*\
Defines the padding around the edge of the modal body. This property accepts lengths followed by a relative unit (`em`, `ex`, or `px`) or percentages. Example: `6px` or `1em`

[**Margin**](https://developer.mozilla.org/en-US/docs/Web/CSS/margin)\
*String*\
Defines the margin spacing around the outside of the modal body. This property accepts lengths followed by a relative unit (`em`, `ex`, or `px`) or percentages. Example: `500px` or `5em`

[**Min Height**](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height)\
*String*\
Defines the minimum height of the modal body. This property accepts lengths followed by a relative unit (`em`, `ex`, or `px`) or percentages. Example: `6px` or `1em`

[**Min Width**](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width)\
*String*\
Defines the minimum width of the modal body. This property accepts lengths followed by a relative unit (`em`, `ex`, or `px`) or percentages. Example: `6px` or `1em`

[**Height**](https://developer.mozilla.org/en-US/docs/Web/CSS/height)\
*String*\
Overrides the default height of the modal body. This property accepts lengths followed by a relative unit (`em`, `ex`, or `px`) or percentages. Example: `500px` or `5em`

[**Width**](https://developer.mozilla.org/en-US/docs/Web/CSS/width)\
*String*\
Overrides the default width of the modal body. This property accepts lengths followed by a relative unit (`em`, `ex`, or `px`) or percentages. Example: `500px` or `5em`

[**Background Image**](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image)\
*String, url*\
If defined, sets the linked image to be the background of the modal body.

[**Background Repeat**](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat)\
*String, css property*\
Sets how background images are repeated in the modal body. Options include:

* `repeat-x`
* `repeat-y`
* `repeat`
* `space`
* `round`
* `no-repeat`

[**Background Attachment**](https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment)\
*String, css property*\
Sets whether the modal body's background image position is fixed within the viewport, or scrolls with its containing block.

[**Background Position**](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position)\
*String, css property*\
Sets the initial position for the modal body's background image.

[**Background Size**](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size)\
*String, css property*\
Sets the size of the modal body's background image.

**Custom Styles** (required)\
*String, css style property input*\
Can apply additional CSS styles to customize the modal body.

### Close Button

[**Size**](https://chakra-ui.com/docs/components/close-button#button-size)\
*Dropdown, default `md`*\
Sets the sizing of the close button. The following options can be used:

* `sm`
* `md`
* `lg`

**Hide Close Button**\
*Checkbox, default `disabled`*\
If enabled, the close button of the modal will be hidden.

**Close Icon Color**\
*String - Valid color string (`white`) or hex code (`#FFFFF`)*\
If defined, overrides the default color of the close button.

[**Button Border Radius**](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)\
*String*\
If defined, sets the close button curve radius. This property accepts lengths followed by a relative unit (`em`, `ex`, or `px`) or percentages. Example: `5px` or `25%`

[**Background Color**](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)\
*String - Valid color string (`white`) or hex code (`#FFFFF`)*\
Sets the background color for the close button.

[**Border**](https://developer.mozilla.org/en-US/docs/Web/CSS/border)\
*String, css property*\
Sets the close button's border. It can be used to set the values of [`border-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width), [`border-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style), and [`border-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color).

[**Padding**](https://developer.mozilla.org/en-US/docs/Web/CSS/padding)\
*String*\
If defined, sets the padding space between contents and border of the close button. This property accepts lengths followed by a relative unit (`em`, `ex`, or `px`) or percentages. Example: `6px` or `1em`

[**Margin**](https://developer.mozilla.org/en-US/docs/Web/CSS/margin)\
*String*\
If defined, adds margin spacing around the close button. This property accepts lengths followed by a relative unit (`em`, `ex`, or `px`) or percentages. Example: `500px` or `5em`

**Custom Styles** (required)\
*String, css style property input*\
Can apply additional CSS styles to customize the close button.

## Nodes

### **Broadcasters**

#### Modal:on-open

Broadcast event whenever a modal has been opened.

#### Modal:on-close

Broadcast event whenever a modal has been closed.

### **Listeners**

#### Modal:open

Opens a modal.

#### Modal:close

Closes a modal.