The Modal frame

A container that appears above other content.

The Modal frame is a container that appears as an overlay in the center of the app when visible. You can add multiple instances of the Modal frame that operate independently.

Demo

Properties

All properties for this object with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read property values.

enableFullBleed

Whether to expand the contents to fill available space.

Type	boolean
Format	True/False
Configurability	Inspector > Appearance > Expand contents to fit
Default	false

Examples

falsetrue

---

footerPadding

The amount of padding used within the footer.

Type	string
Format	Plain Text
Configurability	Inspector > Content > Add-ons > Footer > Padding
Allowed Values	Value UI Option Description 8px 12px Normal 8px top and bottom, 12px left and right. 0 None No padding.
Default	8px 12px

Examples

false"8px 12px"

---

headerPadding

The amount of padding used within the header.

Type	string
Format	Plain Text
Configurability	Inspector > Content > Add-ons > Header > Padding
Allowed Values	Value UI Option Description 8px 12px Normal 8px top and bottom, 12px left and right. 0 None No padding.
Default	8px 12px

Examples

false"8px 12px"

---

hidden

Whether this object is hidden from view.

Type	boolean
Format	True/False
Configurability	Inspector > Appearance > Hidden
Default	false

Examples

falsetrue

---

hideOnEscape

Whether to toggle hidden to true when the Esc key is pressed.

Type	boolean
Format	True/False
Configurability	Inspector > Interaction > Advanced > Hide on escape
Default	true

Examples

falsetrue

---

loading

Whether to display a loading indicator.

Type	boolean
Format	True/False
Configurability	Inspector > Interaction > Loading
Default	false

Examples

falsetrue

---

overlayInteraction

Whether to toggle hidden to true if the user clicks outside of the content area.

Type	boolean
Format	True/False
Configurability	Inspector > Interaction > Close when clicking outside
Default	true

Examples

falsetrue

---

padding

The amount of padding to render inside.

Type	string
Format	Plain Text
Configurability	Inspector > Spacing > Padding
Allowed Values	Value Description 4px 8px Normal padding. 0 No padding.
Default	4px 8px

Examples

false4px 8px

---

showBorder

Whether to show a border.

Type	boolean
Format	True/False
Configurability	Inspector > Appearance > Show border
Default	false

Examples

falsetrue

---

showFooter

Whether to show the footer area.

Type	boolean
Configurability	Inspector
Default	null

---

showFooterBorder

Whether to show a border above the footer.

Type	boolean
Format	True/False
Configurability	Inspector > Content > Add-ons > Footer > Appearance > Show separator
Default	null

Examples

falsetrue

---

showHeader

Whether to show the header area.

Type	boolean
Format	True/False
Configurability	Inspector > Content > Add-ons > Header > Appearance > Show header
Default	false

Examples

falsetrue

---

showHeaderBorder

Whether to show a border under the header.

Type	boolean
Format	True/False
Configurability	Inspector > Content > Add-ons > Header > Appearance > Show separator
Default	true

Examples

falsetrue

---

showOverlay

Whether to display a darkened overlay when visible.

Type	boolean
Format	True/False
Configurability	Inspector > Appearance > Show overlay
Default	null

Examples

falsetrue

---

tooltipText

The tooltip text to display next to the label on hover.

Type	string
Format	Markdown
Configurability	Inspector > Content > Add-ons > Helper text
Default	null

Examples

falseSubmit

---

width

The width.

Type	string
Format	Integer
Configurability	Inspector
Allowed Values	Value Description small Small. medium Medium. large Large. fullScreen Full screen.
Default	null

Examples

false1280

---

Methods

JavaScript API methods for this object. You can write JavaScript almost anywhere in Retool and use methods to manipulate data and property values.

modal.hide()

Hide the component.

Definition

modal.hide()

Examples

Hide modal.

modal.hide();

---

modal.setHidden()

Set the hidden value to toggle whether the component is visible. Defaults to true without a parameter.

Definition

modal.setHidden(hidden)

Parameters

hidden

Whether this object is hidden from view.

Type	boolean
Format	True/False
Default	false

Examples

true

---

Examples

Hide modal.

modal.setHidden(true);

Unhide modal.

modal.setHidden(false);

---

modal.show()

Show the component.

Definition

modal.show()

Examples

Show modal.

modal.show();

---

modal.showFooter()

Set the showFooter value to toggle whether the component footer is visible.

Definition

modal.showFooter(showFooter)

Parameters

showFooter

Whether to show the footer area.

Type

boolean

---

Examples

Show the footer of modal.

modal.setShowFooter(true);

Hide the footer of modal.

modal.setShowFooter(false);

---

modal.showHeader()

Set the showHeader value to toggle whether the component header is visible.

Definition

modal.showHeader(showHeader)

Parameters

showHeader

Whether to show the header area.

Type	boolean
Format	True/False
Default	false

Examples

true

---

Examples

Show the header of modal.

modal.setShowHeader(true);

Hide the header of modal.

modal.setShowHeader(false);

---

modal.toggleHidden()

Toggle the hidden value between true and false.

Definition

modal.toggleHidden()

Examples

Toggle the hidden value of modal.

modal.toggleHidden();

---

Events

Events triggered by user interactions. You can configure event handlers in the IDE to trigger queries or other actions in response to events.

Event	Description