Skip to main content

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​

PropertiesDescription
Event handlerdetecting and responding to specific user actions or events, such as clicks, keypresses, value changes
Click mask to close modalwhether clicking on the background overlay or mask of the modal will close the modal window
Show headerwhether the component should display a header or title section
Show footerwhether the component should display a footer section
Border Colorcolor of the border that surrounds a modal component
Border Radiuscurvature of the corners of a modal component's border
Border Widththickness or width of the border surrounding a modal component
Backgrounddefines 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

open_modal

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

close_modal

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)

modal_confirm

Step 4 Test​

modal_test