Modal
The Modal
is the right choice for any kind of popup or dialog that you would like to show prominently on top of the regular app UI. Like the Container, Form and Slideoutcomponents, the Modal
acts as a host of child components with its own grid system. Due to its fixed position on the screen, you cannot change the component position or its dimensions by dragging and dropping.
Accessing a modal
Since the Modal
is usually not visible on the canvas, you might wonder how to access a closed modal in the app editor. You can use the explorer tab of the left-hand pane to open any modal component with a click.
It is not possible to drag another component from outside a modal into a modal. Until this issue is resolved, we recommend using copy-paste to achieve this result: 1. Select the component(s) that you would like to move to a modal 2. Use CMD+c (Mac) / CTRL+c (Win) to copy the selected component(s) 3. Open the target modal via the explorer tab and make sure it is selected 4. Use CMD+v (Mac) / CTRL+v (Win) to paste the copied component(s) into the modal 5. Delete the copied component(s) outside the modal
Modal sizing
Instead of resizing a Modal
in the usual way with drag-and-drop, the Modal
dimensions are determined by its "Width" and "Height" properties. You can place any valid CSS expression, for example, 80%
, 500px
, 80vh
or even calc(100% - 50px)
, and these dimensions are applied to the Modal
.
The Modal
has a minimum height of 280px
and minimum width of 360px
to maintain basic usability that cannot be changed.
We recommend using relative sizing as much as possible. Absolute dimensions in pixels might lead to undesired overflow on small screens, or weirdly small modals on large screens.
Properties
The Modal
component offers the following configuration properties.
Review the notes regarding the "Scrollable" property in the Container reference, the Modal
behaves in exactly the same way.
An open modal is closed automatically when another modal or slideout is opened. This means, that you do not need to close a slideout explicitly when opening another modal or a slideout.
Events
The Modal
offers two events to associate actions with:
On show: This action is executed whenever the modal is opened, regardless of the reason ("Visible" property,
show()
function, selecting the component in the explorer tab of the app editor).On hide: This action is executed when a modal is closed, regardless of the reason.
To maintain a pleasant user experience, the "On show" action is executed asynchronously with displaying the modal. A long-running action does not block the modal render, but leads to a spinner until the action run has finished. This is useful, for example, fetching data from sources when a modal is opened.
The "On hide" action is executed asynchronously as well, i.e. the modal will be closed instantly, but the action might still be running. Again, this leads to a more snappy UI and better user experience. There is currently no way to modify this action execution behavior.
API
The Modal
exposes the following API in the JavaScript runtime environment.
Last updated