Всплывающие окна (Popups)
Всплывающие окна (popups) — это элементы интерфейса, которые появляются поверх основного контента веб-страницы, привлекая внимание пользователей к важной информации. Они используются для различных целей: уведомлений, рекламы, форм подписки, актуальных новостей и многого другого. С их помощью можно быстро донести до посетителя важные сообщения без необходимости перехода на другие страницы.
Создание всплывающих окон с помощью информеров и почтовых форм
В данном решении используются информеры и почтовые формы, что позволяет легко управлять содержимым окон и интегрировать их в любой шаблон сайта. Метод универсален и подходит для всех модулей uCoz.
Примеры готовых всплывающих окон
Пример №1: Актуальная новость (Информер)
Данное всплывающее окно позволяет быстро донести до посетителей ключевую информацию о последних новостях или обновлениях на сайте, выделяя их важность и обеспечивая удобный доступ к дополнительной информации.
Создайте информер со следующими параметрами:
- Раздел: Новости сайта
- Тип данных: Материалы
- Способ сортировки: Дата добавления материала (D)
- Количество материалов: 1
- Количество колонок: 1
Код информера «Актуальная новость»
Пример №2: Скидки 50% (Информер)
Этот popup поможет эффективно привлечь внимание к текущим акциям и скидкам на сайте.
Создайте информер со следующими параметрами:
- Раздел: Магазин
- Тип данных: Категории
- Количество материалов: 1
- Количество колонок: 1
Пример №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 секунда.
popup.style.animation
или установите её в пустое значение: popup.style.animation = '';
Гибкость настройки анимации позволяет адаптировать всплывающее окно под дизайн вашего сайта и предпочтения аудитории.