Low-code designer > Set up interfaces > Widget types > Element layout / Modal window

Modal window

With this widget, a modal window is opened upon a specific action, for example, a button click.

To add the widget to a form, drag it to the modeling canvas or click +Widget. Configure the widget’s settings in the pop-up window.

Main tab

ModW 1

  • Header. In this field you need to name the window. You can do it in two ways: enter the name manually or click the link button on the right side of the field and select the String context variable. The value of the variable will determine the header.
  • Show sidebar. Check this box if you want sidebar to be displayed for the modal window. You also can click on the link button on the right side of the field and select a Yes/No switch variable from the widget or app context. The value of the variable will determine the widget’s visibility.
  • Size*. Select the size of the modal window.
  • Show window. Check this box if you want the window to be displayed on the page by default or shown on a condition. You can configure this setting it in two ways: simply check the box or click on the link button on the right side of the field and select a Yes/No switch variable from the widget or app context. In the second case, the value of the variable will determine the widget’s visibility.

Events tab

ModW3

  • On window close handler. This option helps you to create on window close event.

Read more about context variables in the Context types article.

System tab

System settings are similar for all widgets. They allow you to set a widget’s visibility and access permissions, configure the widget’s behavior when the user hovers over it, etc. Read more about these settings in the System widget settings article.

To finish configuring the widget, click Save and Publish.

Example

In the example below, the Modal window widget is used for quick access to the file upload form. When a user hovers over the corresponding field, a modal window for file upload appears.

ModW 2

Found a typo? Highlight the text, press ctrl + enter and notify us