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.
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
true
footerPadding
The amount of padding used within the footer.
Type | string | |||||||||
Format | Plain Text | |||||||||
Configurability | Inspector > Content > Add-ons > Footer > Padding | |||||||||
Allowed Values |
| |||||||||
Default | 8px 12px |
Examples
"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 |
| |||||||||
Default | 8px 12px |
Examples
"8px 12px"
hidden
Whether this object is hidden from view.
Type | boolean |
Format | True/False |
Configurability | Inspector > Appearance > Hidden |
Default | false |
Examples
true
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
true
loading
Whether to display a loading indicator.
Type | boolean |
Format | True/False |
Configurability | Inspector > Interaction > Loading |
Default | false |
Examples
true
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
true
padding
The amount of padding to render inside.
Type | string | ||||||
Format | Plain Text | ||||||
Configurability | Inspector > Spacing > Padding | ||||||
Allowed Values |
| ||||||
Default | 4px 8px |
Examples
4px 8px
showBorder
Whether to show a border.
Type | boolean |
Format | True/False |
Configurability | Inspector > Appearance > Show border |
Default | false |
Examples
true
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
true
showHeader
Whether to show the header area.
Type | boolean |
Format | True/False |
Configurability | Inspector > Content > Add-ons > Header > Appearance > Show header |
Default | false |
Examples
true
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
true