Low-code дизайнер > Создание интерфейсов > Типы виджетов > Размещение элементов / Модальное окно

Модальное окно

Данный виджет позволяет открывать модальное окно при выполнении определенного действия, например, при нажатии на кнопку.

Чтобы настроить виджет, перетащите его с правой панели конструктора интерфейсов на поле для моделирования или нажмите кнопку +Виджет. В открывшемся окне укажите нужные опции.

модальное окно 1

  • Заголовок – это поле для ввода отображаемого наименования окна. Настройку заголовка можно осуществить двумя способами: ввести его вручную или нажать на кнопку ссылки справа и указать контекстную переменную виджета или приложения типа Строка. Значение контекстной переменной будет задавать заголовок меню;
  • Показывать боковую панель – позволяет настроить необходимость отображения боковой панели модального окна. Настройку опции можно осуществить двумя способами: установить флажок или нажать на кнопку ссылки справа и указать заранее созданную контекстную переменную виджета или приложения типа Выбор «да/нет». Значение контекстной переменной будет отвечать за отображение боковой панели;
  • Размер* позволяет настроить размер отображения модального окна;
  • Показать окно – позволяет выбрать, будет ли окно скрыто по умолчанию или будет демонстрироваться при определенном действии. Вы можете настроить эту опцию двумя способами: установить флажок или нажать на кнопку ссылки справа и указать контекстную переменную виджета или приложения типа Выбор «да/нет», которая будет отвечать за демонстрацию окна;

 

  • Событие при закрытии окна – функция, которая позволяет вам добавить событие, которое будет происходить при закрытии модального окна.

Подробнее о контекстных переменных читайте в статье Типы контекста.

Такие настройки, как скрытие, обязательность заполнения, HTML стили,  события при наведении или при перемещении курсора за границы являются общими для всех виджетов и описаны в соответствующей статье справки.

Для завершения настройки виджета нажмите на кнопку Сохранить, а затем Опубликовать. На данном примере виджет Модальное окно добавлен для быстрого доступа к загрузке фойла договора при наведении курсора на соответствующее поле

На данном примере виджет Модальное окно добавлен для быстрого доступа к загрузке файла договора при наведении курсора на соответствующее поле.

Пример