536 слов | 2 минуты

Popup система

Полное руководство по использованию и настройке всплывающих окон

Демо версия

Обзор

Это интеллектуальная система управления всплывающими окнами (popup) для веб-страниц. Система позволяет показывать пользователям важные уведомления с гибкими настройками отображения.

Ключевые возможности

• Автоматическое появление popup в случайное время
• Skeleton loader для плавной загрузки контента
• Гибкие настройки через удобный интерфейс
• Сохранение настроек в localStorage браузера
• Подробное логирование всех событий в консоль

Функционал

1. Жизненный цикл Popup

Шаг 1: Загрузка страницы

При загрузке страницы система инициализируется и загружает сохраненные настройки из localStorage.

Шаг 2: Планирование показа

Система генерирует случайную задержку (от 1 до N секунд, где N задается в настройках) и планирует показ popup.

Шаг 3: Появление popup

Popup появляется с эффектом анимации. Сначала показывается skeleton loader (анимация загрузки), затем через 1 секунду загружается реальный контент.

Шаг 4: Закрытие пользователем

Пользователь может закрыть popup кнопкой "×" или кликом вне окна. Факт закрытия сохраняется в localStorage.

Шаг 5: Дальнейшее поведение

В зависимости от настройки "Не показывать повторно" popup либо больше не появится, либо появится снова при следующей загрузке страницы.

2. Система логирования

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

[12:34:56]: Инициализация приложения...
[12:34:56]: PopupManager инициализирован
[12:34:56]: Следующий popup через 3.5 сек
[12:35:00]: Показ popup окна
[12:35:01]: Контент popup загружен
[12:35:15]: Popup закрыт пользователем

3. Настройки

Доступ к настройкам осуществляется через кнопку с иконкой шестеренки в правом нижнем углу страницы.

Доступные параметры:

Панель управления:

• Сохранить - сохраняет текущие настройки
• Сбросить все настройки - удаляет все сохраненные данные и возвращает настройки по умолчанию

4. Хранение данных

Все данные сохраняются в localStorage браузера:

Совет: Вы можете просмотреть сохраненные данные в DevTools браузера:

F12 → Application (Chrome) или Storage (Firefox) → Local Storage

Очистка данных вручную:

Через консоль браузера (F12 → Console):

// Очистить все данные
localStorage.clear();

// Удалить конкретную настройку
localStorage.removeItem('popup_was_closed');

Технические детали

Используемые технологии

• Bootstrap 5 - для UI компонентов (модальные окна, кнопки, сетка)
• Vanilla JavaScript - без внешних зависимостей
• LocalStorage API - для хранения настроек
• CSS3 Animations - для skeleton loader и анимаций

Архитектура кода

Код организован в функциональном стиле с использованием модульного паттерна:

• Settings - управление настройками и localStorage
• PopupManager - управление жизненным циклом popup
• SettingsModal - управление модальным окном настроек
• logger() - функция логирования событий

Skeleton Loader

Используется CSS-анимация для создания эффекта загрузки:

.skeleton-loader {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

Примеры использования

Сценарий 1: Приветственное сообщение

Цель: Показать новому пользователю приветственное сообщение один раз

Настройки:

• Показывать всплывающее окно: ВКЛЮЧЕНО
• Интервал: 3 секунды
• Не показывать повторно: ВКЛЮЧЕНО

Результат: Popup появится через 1-3 секунды после загрузки и больше не появится

Сценарий 2: Регулярные напоминания

Цель: Напоминать пользователю о чем-то при каждом визите

Настройки:

• Показывать всплывающее окно: ВКЛЮЧЕНО
• Интервал: 5 секунд
• Не показывать повторно: ВЫКЛЮЧЕНО

Результат: Popup будет появляться один раз при каждой загрузке страницы

Сценарий 3: Отключение popup

Цель: Временно отключить все всплывающие окна

Настройки:

• Показывать всплывающее окно: ВЫКЛЮЧЕНО

Результат: Popup не будет появляться вообще

Настройка и расширение

Изменение контента popup

Контент popup генерируется случайно из предустановленного массива сообщений в функции loadContent() в PopupManager. Для изменения контента нужно отредактировать массив messages в исходном коде:

const messages = [
  "Ваше новое сообщение 1",
  "Ваше новое сообщение 2",
  "Ваше новое сообщение 3"
];

Изменение внешнего вида popup

Внешний вид настраивается через CSS. Основные стили находятся в классах:

.popup-overlay {
  /* Стили для оверлея */
}

.popup-content {
  /* Стили для содержимого */
}

.popup-close {
  /* Стили для кнопки закрытия */
}

Изменение интервалов времени

Для изменения доступных интервалов времени отредактируйте поле ввода в HTML:

<input type="number" min="1" max="60" value="10">