# Modal window
> [HTML Version](modal_window.html)
**Modal window** is a widget that opens a window for working with app items in BRIX. There are two types of modal windows:
- Default modal window. It is added to all the app forms by default and displays app item pages, for example, the creation page.
- Child modal window. It is added to forms manually and is triggered by a certain action or condition.
Let’s take a closer look at both of them.
## Default modal window
The default modal window is built into all the app forms and cannot be deleted. It opens the forms for creating, editing, or viewing an app item.
In its settings you can change how the [Sidebar](right-side-panel.md) is displayed. To do that, click on any free space on the modeling canvas. The **Modal window** label appears in the top-right corner. Click on the gear icon to open the settings.
**(main_modal.PNG)**
### Main tab
### (main_modal_settings.PNG)
Use the **Show sidebar** option to show or hide the side panel on the form. Alternatively, you can bind this field to a context variable so that the sidebar is shown only with a specific variable value. To do that, click **[]** and select the variable from the context. To learn more, see [System widget settings](bind-field-to-widget-option.md).
### Events tab
On this tab, you can set the widget’s behavior when you hover over it and move the cursor outside its borders. To learn more, see [System widget settings](common_widget_settings.md).
### System tab
Here you can configure settings that are the same for any widget: its visibility, access to it, content loading, etc. Read more in the [System widget settings](common_widget_settings.md) article.
The **Side panel HTML styles** field is also available for the **Modal Window** widget. You can use it to customize the CSS style for the sidebar, for example, to set its width.
To complete settings up the widget, click **Save**.
To make the changes available to users, click **Save** and **Publish** in the designer’s toolbar.
## Child modal window
This widget opens a second modal window over the default one when a certain action takes place, for example, the user clicks a button.
To place the widget on the form, drag it from the right pane of the [interface designer](interface_designer.md) to the modeling canvas, or click **+Widget**. You can learn more in [Form template](360029250931.md). Then manage the settings in the opened window.
### Main tab
**(modal_child_settings.PNG)**
- **Header**. Enter the header that will be displayed in the window. You can bind this field with a [String](360009707032.md#string) variable created on the [Context](designer-tabs.md#context) tab in the interface designer. To do that, first click **[]**, then click ** **and select the variable from the list. Its value will be displayed in the modal header.
- **Show sidebar**. Enable this option to show the right-side panel on the form. Click **[]** to bind the field with a [Yes/No switch](360009707032.md#yes-no-switch) variable and show or hide the side panel according to the variable’s value.
- **Size\***. Select the size of the modal window.
- **Show window**. Check this option if you want the modal window to be shown on the form by default. Click **[]** to bind the field with a [Yes/No switch](360009707032.md#yes-no-switch) variable and show or hide the modal window according to the variable’s value.
### Events tab
### (modal_events_tab.png)
On this tab, you can customize the widget’s behavior by selecting functions from scripts that will be called when various events occur. **On mouse enter handler** and **On mouse leave handler** are available for any widget. Find out more in [System widget settings](common_widget_settings.md).
For a child modal window, you can also configure the **On window close handler**. For example, if filtering for a report is set in a modal window, you can update the data on the form when the window is closed.
### System tab
Here you can configure settings that are the same for any widget: its visibility, access to it, content loading, etc. Read more in the [System widget settings](common_widget_settings.md) article.
The **Side panel HTML styles** field is also available for the **Modal Window** widget. You can use it to customize the CSS style for the sidebar, for example, to set its width.
To finish the setup, click **Save**. To make the changes available to users, click **Save** and **Publish** in the top toolbar of the interface designer.
## Example
In the example below, the **Modal Window** widget is used to quickly open the file upload form. When a user hovers over the corresponding field, a pop-up for file upload appears.
**(hmfile_hash_9e537ac1.gif)**