[Урок 16] Делаем popup элемент с таймером

Всем привет! В сегодняшнем уроке мы научимся делать pop-up с таймером. Это будет всплывающее окно, которое будет вылезать, когда пользователь проводит н-ное количество времени на сайте.

Выберем блок, оформим окно, установим и опубликуем. Поехали!

Выбираем блок

Переходим во все блоки - раздел "Другое" и выбираем блок Т188 - Показывать поп-ап по таймеру.

Устанавливаем его на страницу и переходим к выбору следующего блока.

Идем ко всем блокам, ищем раздел "Кнопки" и выбираем блок BF503 - Popup information - устанавливаем его.

Итого - у нас есть два блока. Для начала поработаем с блоком Popup information.

Редактируем блок Popup information

Переходим к основным настройкам и видим все стандартные настройки : ширина блока, цвет фона и так далее.
Редактируем его так, как захотите.

Единственный момент, в разделе POP-UP есть несколько настроек, с которыми мы не сталкивались.

Затемнение фона : цвет - цвет фона позади всплывающего окна. Я поставлю чёрный.

Затемнение фона : непрозрачность - прозрачность фона (в моем случае черного). Я сделаю 50%

Цвет иконки закрытия : цвет кнопки для закрытия окна, соответственно зависит от фона.

Когда все основные настройки выполнены, идём к настройкам контента.

Тут нас встречает ссылка на pop-up.

Если у вас будет несколько попап окон, добавляем к ссылке цифру (или просто делаем её уникальной другим любым способом). У нас попап один, поэтому я оставлю её такой, какая есть.

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

В конце контента ОТКЛЮЧАЕМ все рекомендательные кнопки.

Это кнопки для шеринга в социальные сети. Если они вам понадобятся, установить их можно будет здесь же, просто поставив галочку.

Закрываем и сохраняем.

Вот так выглядит наше окно. Переходим к привязке его к таймеру.

Настраиваем блок Т188

Переходим к основным настройкам.

Таймер : время, через которое блок будет вылетать. Устанавливается в секундах, я поставлю 5 секунд.

Cookie name : оставляем неизменным

Кол-во дней для повторения блока : время, с какой периодичностью блок будет вылетать одному и тому же пользователю. Если установим -1 блок будет вылетать при каждом заходе на сайт. Если поставим например 2, то после первого показа вылетит только через 2 дня. Поставлю -1.

Переходим к настройкам контента

Тут единственное окно, это ССЫЛКА НА POPUP.

Это именно та ссылка, которую мы видели, когда редактировали блок с поп-апом.

Вводим её в окно : #popup:infoblock

Готово! Сохраняем, закрываем, публикуем и смотрим результат.

Если вы сделали всё правильно - на сайте вылетит окно ровно через 5 секунд, как вы попадёте на него.

На этом всё. Учитесь, читайте предыдущие уроки и не забывайте импровизировать! Всем удачи)