ToolJet/docs/versioned_docs/version-3.16.0-LTS/widgets/modal.md

id	title
modal-v2	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.

:::caution Restricted components Certain components, namely Calendar and Kanban, are restricted from being placed within the Modal component. :::

Properties

<div style={{ width:"100px"}}> Property	<div style={{ width:"100px"}}> Description	<div style={{ width:"200px"}}> 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.

<div style={{ width:"150px"}}> Action	<div style={{ width:"170px"}}> Description	<div style={{width: "200px"}}> 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	<div style={{ width:"250px"}}> 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

<div style={{ width:"100px"}}> Action	<div style={{ width:"150px"}}> Description	<div style={{ width:"250px"}}> 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

<div style={{ width:"100px"}}> Property	<div style={{ width:"150px"}}> Description	<div style={{ width:"250px"}}> 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

<div style={{ width:"100px"}}> Property	<div style={{ width:"150px"}}> Description	<div style={{ width:"250px"}}> 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

<div style={{ width:"100px"}}> Property	<div style={{ width:"150px"}}> Description	<div style={{ width:"250px"}}> 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

<div style={{ width:"100px"}}> Property	<div style={{ width:"150px"}}> Description	<div style={{ width:"250px"}}> 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

<div style={{ width:"100px"}}> Property	<div style={{ width:"150px"}}> Description	<div style={{ width:"250px"}}> 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. :::