Modal section

Creates a section separate from the main user interface that you can use to handle a tangent task or display something. To resume work on the user interface, you must close the modal section.

A Modal section is not an alert, and it precludes the user from working on other parts of the user interface. Typically, a Modal section uses a layout of other views, such as Well or Panel.

Tip: You must set the visibility property of the Modal section view to None (under Properties > Visibility), otherwise the Modal section shows by default.

Configuration properties

Under Configuration, set or modify the appearance and behavior properties for the view.

Screen size: A configuration property that has the Screen Sizes icon beside the property name can have different values for each screen size. If you do not set a value, the screen size inherits the value of the next larger screen size as its default value.

Theme definitions: Theme definitions specify the colors and styles for a view and determine its appearance. You can preview the look and feel of views in the theme editor. See Themes.

The appearance configuration properties for the Modal section view are shown in the following table:

Table 1. Appearance configuration properties for Modal section
Appearance configuration property	Description	Data type
Modal placeholder width	Specifies the width of the view in pixels (px), percentage of the original width (%), or em units.	`String`
Show buttons	Shows the buttons in the modal.	`Boolean`
Color style	The color style of the primary button. The available options are Default, Primary, Info, Success, Warning, and Danger.	`ButtonColorStyle`
Text on primary button	The text on the button that allows the user to confirm the action in the modal. For example, Save or OK.	`String`
Text on secondary button	The text on the button that allows the user to dismiss the action in the modal. For example, Close or Cancel.	`String`

The behavior configuration properties for the Modal section view are shown in the following table:

Table 2. Behavior configuration properties for Modal section
Behavior configuration property	Description	Data type
Close on click	If you select Close on click, users can close the modal section by clicking anywhere outside of it. By default, the modal section cannot be dismissed.	`Boolean`

Events

Set or modify the event handlers for the view in the Events properties. You can set events to be triggered programmatically or when a user interacts with the view. For information about how to define and code events, see User-defined events.

For the Modal section view, you can activate the following types of event handlers:

On load: Activated when the page loads, for example me.setVisible(true);
On close: Activated when the Modal section window is closed, for example ${Output_Text1}.setText("Modal section closed...");, where Output_Text1 is the control ID of the output text.
On show: Activated when the Modal section window is opened, for example me.setText("Modal section is open...");
On primary button clicked: Activated when the modal's primary button is clicked. For example:
```
btn text: Save
onclick: customized save function/actions
```
On secondary button clicked: Activated when the modal's secondary button is clicked. For example:
```
btn text: Close
onclick action: me.hide();
```

Methods

For more information about the available methods, see the Modal section JavaScript API.

Additional resources

For information about how to create a coach or page, see Building coaches.
For information about standard properties (General, Configuration, Positioning, Visibility, and HTML Attributes), see View properties.