Modal

What is Modal?

In ILLA Cloud, the modal component is a user interface element that is used to display content, information, or actions in a focused and overlayed window. The modal component typically appears on top of the main application screen, temporarily interrupting the user's workflow and drawing their attention to the modal content.

Properties

Properties	Description
Event handler	detecting and responding to specific user actions or events, such as clicks, keypresses, value changes
Click mask to close modal	whether clicking on the background overlay or mask of the modal will close the modal window
Show header	whether the component should display a header or title section
Show footer	whether the component should display a footer section
Border Color	color of the border that surrounds a modal component
Border Radius	curvature of the corners of a modal component's border
Border Width	thickness or width of the border surrounding a modal component
Background	defines the color or image that fills the content area of a modal component

Method

You can use other components to control the component. We support the following two methods:

• openModal

open the modal component

• closeModal

close the modal component

Use case

We will demonstrate how to make a form with name and age as input, as well as bar progress to show the completion progress of the form.

Step 1 Add Components

Add a button component labeled "Open Modal"

Add a modal component to the canvas.

Step 2 Configure the component

For the "Open Modal" button components, we can configure it to open the modal component if clicked.

1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
2. In the Edit event handler, select Control component in action, and select the modal component that you want to update as the target of the event.
3. Choose the openModal method

Click this button to open the modal component and you may put whatever you want in the middle area of the modal.

For the "Cancel" button component, we can configure it to close the modal if clicked

1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
2. In the Edit event handler, select Control component in action, and select the modal component that you want to update as the target of the event.
3. Choose the closeModal method

Similarly, we can configure the "Confirm" button to congrats

1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
2. In the Edit event handler, select Show notification in action, title "Congrat!" and description "Congratulations!". Choose Success for type, put {{2000}} for the duration (2 seconds)

Step 4 Test