Всплывающие окна (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 = '';
Гибкость настройки анимации позволяет адаптировать всплывающее окно под дизайн вашего сайта и предпочтения аудитории.