Dialog
A modal popup that overlays the page content. Build any layout inside it — the dialog’s children are your modal content.
Insert image: A Dialog component rendered on the canvas as a modal overlay with a semi-transparent background, showing a card with text content and a close button inside
Properties
| Property | Description |
|---|---|
overlayColor | Background overlay color (e.g., rgba(0,0,0,0.5)). |
closeOnOverlayClick | Whether clicking the overlay dismisses the dialog. |
Opening and Closing
The dialog is controlled via its element variable:
element.{componentId}.open (boolean)
Toggle this variable from any click action using “Set Variable” to open or close the dialog.
Open a dialog: Set Variable → element.{dialogId}.open → true
Close a dialog: Set Variable → element.{dialogId}.open → false
Use Cases
- Confirmation prompts before a purchase
- Terms and conditions overlay
- Discount offer popups
- Image/video lightbox
- Payment checkout overlay
Last updated on