Modal

In Lowcoder, the Modal component is a versatile container designed to display content in an overlay, effectively capturing user attention for specific interactions or information. It functions similarly to other container components like Form or Drawer allowing you to embed various UI elements or modules within it.

Key Features:

1. Content Display: The Modal can house multiple components, enabling the creation of complex interfaces within the overlay. This is particularly useful for tasks such as form submissions, displaying detailed information, or presenting user prompts/alerts. User can drag/insert different components inside the Modal component.

2. Event Handling: You can define event handlers for the Modal to manage user interactions effectively. For instance, triggering specific actions when the Modal is opened or closed enhances the interactivity of your application.

3. Styling and Customisation: The Modal supports extensive styling options, allowing you to align its appearance with your application's design. You can customize aspects such as colors, borders, backgrounds etc to create a cohesive user experience.

By leveraging the Modal component, you can effectively manage user focus and interactions, presenting essential information or actions in a centralised overlay within your Lowcoder applications.

Component Playground

On Component Playground, you can interact with the Modal component and explore it's Properties, Events and Methods. Play with different Styling properties to see the effect on the Modal component.

Lowcoder | rapid App & VideoMeeting builder for everyone.

Component Auto-Docs

In the Auto-Docs of Modal component, we have shown how to use different properties of the Modal component. It also includes the Styling properties of the Modal component.

Lowcoder | rapid App & VideoMeeting builder for everyone.

Properties of the Modal

These properties are accessible in {{ }} notations, as well as in JavaScript Queries.

Property Name	Type	Description
visible	Boolean	Returns True or False based on whether the Modal component is visible or not

Events

Events give you the ability to trigger further actions (with Event-Handlers).

Event Name	Description
Open	When a User "opens" a Modal
Close	When a User "closes" a Modal

Methods

You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilized. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events.

setVisible() :

modal1.setVisible() method sets the Modal's Visible property, due to which Modal component is shown or not.

modal1.setVisible(true);

clearVisible() :

modal1.clearVisible() clears the Modal's Visible property and empties the already set value in the Modal component.

modal1.clearVisible();

resetVisible() :

modal1.resetVisible() method resets the Modal's visible property to the default value of the Modal component.

modal1.resetValue();