Modal

A modal is a popup that can be displayed in the center of your page.

Once you’ve added your modal element, click “Edit Modal” to open up the popup area to build the contents.

Usually, you need to add interactions to open and close model, see Displaying a modal

Properties

z-index: Set the z-order (stack order) of a positioned element. It is used to make sure the modal is displayed on top.

Show mask: Determines whether you want to darken the page when the modal is open.

Show dismiss button: Display the close button at the top right of the modal.

Close modal after clicking on mask: Enable this option to close the modal when a user clicks outside of it.

See Tooltip for tooltip configurations.

Displaying a modal

To trigger the modal to open, set up an interaction on another element, such as a button.

Here is an example for a button click to trigger the modal to open.

Supported Events

Open Modal: Triggered when a user opens the modal.

Close Modal: Triggered when a user closes the modal.

Supported Actions

Open Modal: Display modal on the screen.

Close Modal: Close modal.

Set Data: Change element data. See Data Store.

Set Loading: Set loading animation. See Set loading animations.

Visit Interactions for more on events and actions.