Всплывающее окно

Всплывающее окно (Pop-up) - виджет для создания окон с важной информацией, формой обратной связи или другим контентом. Не закрыв всплывающее окно, пользователь не может продолжать взаимодействовать с сайтом.

Виджет состоит из нескольких элементов:

• Слой перекрытия (Overlay) - затемненный слой под всплывающим окном
• Закрыть (Close) - стандартная кнопка закрытия окна
• Контент (Content) - область для размещения содержимого

Содержимое, которое вы хотите разместить в окне, нужно вставлять в элемент Контент. Вы можете добавить любые элементы, например, Текст, Картинку, Форму и т.п.

Когда вы закончили редактирование всплывающего окна, нажмите кнопку Готово в верхней части редактора.

Виджет всплывающего окна нельзя перемещать в списке слоев — это закрепленный элемент. При вставке на страницу все поп-апы помещаются в начало списка элементов на вкладке Слои (Layers). В закрытом виде они не видны на холсте, поэтому помечены иконкой зачеркнутого глаза.

Открытие всплывающего окна при нажатии на кнопку

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

Для этого выберите кнопку, при клике на которую будет открываться всплывающее окно, и настройте для нее параметры на вкладке Настройки правой панели:

1. В разделе Действия (Actions) выберите действие При клике (Click).

2. В настройках действия (Action Details) укажите:

   • Запуск действия (Action trigger) - При клике (Click)
   • Действие (Action) - Показать элемент (Show element)

3. Нажмите кнопку Выбрать элемент и выберите на вкладке Слои всплывающее окно.

Стили всплывающего окна

К всплывающему окну можно применить любые стили на вкладке Дизайн правой панели – изменить его размер, цвет фона, границы, закругление углов и т.д.

Вы также можете настроить цвет или прозрачность слоя перекрытия и изменить иконку кнопки закрытия.

Настройки всплывающего окна

Для всплывающего окна доступны следующие настройки на вкладке Настройки (Settings) правой панели:

Общие настройки (General) позволяют:

• настроить закрытие всплывающего окна по клику на слое перекрытия
• настроить расположение кнопки закрытия на слое перекрытия или на самом окне
• блокировать прокрутку страницы при открытом всплывающем окне

Настройки анимации (Animation) имеют следующие параметры:

• Эффект (Effect) - определяет эффект открытия и закрытия всплывающего окна:

  • Затухание (Fade)

  • Уменьшение/увеличение (Zoom)

  • Скольжение (Slide)

• Плавность анимации при открытии и закрытии

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

• Время анимации (в миллисекундах). Вы можете выбрать из выпадающего списка время анимации от 0 до 2000 мс или ввести свое значение.