Telegram
Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!

Всплывающие окна (Popups)

Всплывающие окна (Popups)
Материал добавлен: 19 Июля 2024
Материал обновлен: 02 Апреля 2025
  1. Примеры готовых всплывающих окон
  2. FAQ по настройке скрипта для popups

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

Создание всплывающих окон с помощью информеров и почтовых форм

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

Примеры готовых всплывающих окон

Пример №1: Актуальная новость (Информер)

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

Создайте информер со следующими параметрами:

  • Раздел: Новости сайта
  • Тип данных: Материалы
  • Способ сортировки: Дата добавления материала (D)
  • Количество материалов: 1
  • Количество колонок: 1

Код информера «Актуальная новость»

Демо всплывающего окна

Пример №2: Скидки 50% (Информер)

Этот popup поможет эффективно привлечь внимание к текущим акциям и скидкам на сайте.

Создайте информер со следующими параметрами:

  • Раздел: Магазин
  • Тип данных: Категории
  • Количество материалов: 1
  • Количество колонок: 1

Код информера «Скидки 50%»

Демо всплывающего окна

Пример №3: Подарочный сертификат (Информер)

Popup с предложением подарочного сертификата поможет увеличить вовлеченность и продажи.

Создайте информер со следующими параметрами:

  • Раздел: Магазин
  • Тип данных: Материалы
  • Способ сортировки: Дата добавления материала (D)
  • Количество материалов: 1
  • Количество колонок: 1

Код информера «Подарочный сертификат»

Демо всплывающего окна

Пример №4: Специальное предложение (Информер)

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

Создайте информер со следующими параметрами:

  • Раздел: Магазин
  • Тип данных: Категории
  • Количество материалов: 1
  • Количество колонок: 1

Код информера «Специальное предложение»

Демо всплывающего окна

Пример №5: Нужна консультация? (Почтовая форма)

Окно обратной связи на страницах, где пользователи проводят много времени (например, карточки товаров).

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

  • Email отправителя: text name="f1"
  • Текст сообщения: textarea name="f3"

Код почтовой формы «Нужна консультация?»

Демо всплывающего окна

FAQ по настройке скрипта для popups

1. Как изменить время задержки для появления всплывающего окна?

Чтобы изменить время задержки появления popup'а, необходимо изменить значение в функции setTimeout внутри скрипта. По умолчанию задержка составляет 5000 миллисекунд (5 секунд).

window.onload = function() {
 const popupClosed = getCookie('popupClosed');
 if (!popupClosed) {
 // Измените значение 5000 на нужное вам количество миллисекунд
 setTimeout(showPopup, 5000); 
 }
}

2. Как убрать привязку к cookies?

Чтобы popup не зависел от cookies и появлялся при каждом заходе на сайт, необходимо удалить фрагменты кода, отвечающие за установку и проверку cookie-файлов.

1. Удалите функции setCookie и getCookie:

function setCookie(name, value, days) {
 const date = new Date();
 date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
 const expires = "expires=" + date.toUTCString();
 document.cookie = name + "=" + encodeURIComponent(value) + ";" + expires + ";path=/";
}

function getCookie(name) {
 const value = "; " + document.cookie;
 const parts = value.split("; " + name + "=");
 if (parts.length == 2) return decodeURIComponent(parts.pop().split(";").shift());
}

2. Удалите проверку cookies и установку флага popupClosed:

window.onload = function() {
 // Удалите проверку cookies
 // const popupClosed = getCookie('popupClosed');
 // if (!popupClosed) {
 setTimeout(showPopup, 5000); 
 // }
}

function closePopup() {
 const popup = document.getElementById('pop-up');
 popup.style.display = 'none';
 // Удалите вызов setCookie
 // setCookie('popupClosed', 'true', 1);
}

3. Как настроить анимацию всплывающего окна или отключить её?

Анимация появления popup'а задаётся в JavaScript-функции showPopup(). Чтобы изменить или отключить анимацию, отредактируйте свойство popup.style.animation.

function showPopup() {
 const popup = document.getElementById('pop-up');
 popup.style.display = 'block';
 // Настройка анимации. Измените параметры или удалите строку для отключения
 popup.style.animation = 'fadeInUp 0.5s ease-out, pulse 2s infinite 1s';
}

Разбор параметров анимации:

  • fadeInUp: Эффект появления снизу вверх.
  • 0.5s: Длительность анимации — 0.5 секунды.
  • ease-out: Анимация быстро начинается и плавно заканчивается.
  • pulse: Пульсирующий эффект.
  • 2s: Длительность пульсации — 2 секунды.
  • infinite: Анимация повторяется бесконечно.
  • 1s: Задержка старта второй анимации — 1 секунда.

Гибкость настройки анимации позволяет адаптировать всплывающее окно под дизайн вашего сайта и предпочтения аудитории.

Всплывающие окна (Popups)