Modal
The Modal component allows you to display content in a pop-up overlay, helping you focus user attention on specific tasks or messages without navigating away from the current page. It’s commonly used for forms, confirmations, alerts, or detailed views. You can open or close the modal programmatically, control its visibility based on user interaction, and customize its size, position, and content for a seamless user experience.
Restricted components
Certain components, namely Calendar and Kanban, are restricted from being placed within the Modal component.
Properties
Property | Description | Expected Value |
|---|---|---|
| Header | Enable or Disable header section in the modal. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Footer | Enable or Disable footer section in the modal. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Width | Select the width for modal component. | Select from dropdown - small, medium, large, fullscreen or dynamically configure the value by clicking on fx and entering a logical expression. |
| Height | Specifies the height of the modal. | Enter the height in pixel or dynamically configure the value by clicking on fx and entering a logical expression. |
Events
| Event | Description |
|---|---|
| On open | Triggers whenever the modal is opened. |
| On close | Triggers whenever the modal is closed. |
info
Check Action Reference docs to get detailed information about all the Actions.
Component Specific Actions (CSA)
The following actions of the component can be controlled using the component-specific actions (CSA), you can trigger it using an event or use a RunJS query.
Action | Description | RunJS Query |
|---|---|---|
| open | Open a modal. | components.modal1.open() |
| close | Close a modal. | components.modal1.close() |
| setDisableTrigger | Disables the modal button. | components.modal1.setDisableTrigger() |
| setDisableModal | Disables the modal pop-up. | components.modal1.setDisableModal() |
| setVisibility( ) | Sets the visibility of the component. | components.modal1.setVisibility(false) |
| setLoading( ) | Sets the loading state of the component. | components.modal1.setLoading(true) |
Exposed Variables
| Variable | Description | How To Access |
|---|---|---|
| show | Indicates if the modal is open. | {{components.modal1.show}} |
| isDisabledModal | Indicates if the modal is disabled. | {{components.modal1.isDisabledModal}} |
| isDisabledTrigger | Indicates if the modal button is disabled. | {{components.modal1.isDisabledTrigger}} |
| isLoading | Indicates if the component is loading. | {{components.modal1.isLoading}} |
| isVisible | Indicates if the component is visible. | {{components.modal1.isVisible}} |
Trigger
| Property | Description |
|---|---|
| Modal trigger visibility | Sets the visibility of modal button. |
| Disable modal trigger | Disables modal button. |
| Use default trigger button | Choose whether to use the default modal button or not. |
| Trigger button label | Provide label for the modal button. |
Additional Actions
Action | Description | Configuration Options |
|---|---|---|
| Loading state | Enables a loading spinner, often used with isLoading to indicate progress. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Dynamic height | Automatically adjusts the modal's height based on its content. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Disable modal window | Disables the modal pop-up. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Close on escape key | Closes the modal when escape key is pressed. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Close on clicking outside | Closes the modal when clicked outside the modal. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Hide close button | Hides close button from the modal header. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Tooltip | Provides additional information on hover. | String (e.g., Enter your password here. ). |
Devices
Property | Description | Expected Value |
|---|---|---|
| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
Styles
Trigger Button
Property | Description | Configuration Options |
|---|---|---|
| Icon | Add an icon to the modal trigger button. | Choose from the icon library. |
| Icon color | Sets the color of the icon. | Select a color from the color picker or set it programmatically using fx. |
| Icon position | Sets the position of the icon. | Choose between Left or Right. |
| Background | Sets the background color of the trigger button. | Select a color from the color picker or set it programmatically using fx. |
| Text | Sets the text color of the trigger button. | Select a color from the color picker or set it programmatically using fx. |
Header
Property | Description | Configuration Options |
|---|---|---|
| Background | Sets the background color of the header. | Select the color or click on fx and input code that programmatically returns a Hex color code. |
| Divider | Sets the color of the divider between header and body. | Select the color or click on fx and input code that programmatically returns a Hex color code. |
Container
Property | Description | Configuration Options |
|---|---|---|
| Background | Sets the background color of the modal body. | Select the color or click on fx and input code that programmatically returns a Hex color code. |
Footer
Property | Description | Configuration Options |
|---|---|---|
| Background | Sets the background color of the footer. | Select the color or click on fx and input code that programmatically returns a Hex color code. |
| Divider | Sets the color of the divider between body and footer. | Select the color or click on fx and input code that programmatically returns a Hex color code. |
info
Any property having fx button next to its field can be programmatically configured.