1. Примеры готовых всплывающих окон
   • Пример №1: Актуальная новость (Информер)
   • Пример №2: Скидки 50% (Информер)
   • Пример №3: Подарочный сертификат (Информер)
   • Пример №4: Специальное предложение (Информер)
   • Пример №5: Нужна консультация? (Почтовая форма)
2. FAQ по настройке скрипта для popups
   • Как изменить время задержки для появления всплывающего окна?
   • Как убрать привязку к cookies?
   • Как настроить анимацию всплывающего окна или отключить её?

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

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

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

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

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

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

Для его установки, необходимо создать новый информер со следующими настройками:

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

Важно! В дополнительных опциях информера можно по усмотрению указать ID материала, URL-адрес которого будет выводиться в кнопке "Читать материал".

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

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

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

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

Для его установки, необходимо создать новый информер со следующими настройками:

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

Важно! В дополнительных опциях информера можно по усмотрению указать ID категории, URL-адрес которой будет выводиться в кнопке "Перейти к покупкам".

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

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

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

С помощью данного всплывающего окона вы сможете значительно повысить конверсию, привлекая внимание к подарочным сертификатам в вашем магазине.

Для его установки, необходимо создать новый информер со следующими настройками:

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

Важно! В дополнительных опциях информера можно по усмотрению указать ID товара, URL-адрес которого будет выводиться в кнопке "Приобрести".

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

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

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

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

Для его установки, необходимо создать новый информер со следующими настройками:

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

Важно! В дополнительных опциях информера можно по усмотрению указать ID категории, URL-адрес которой будет выводиться в кнопке "Перейти к покупкам

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

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

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

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

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

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

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

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

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

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

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

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

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

Чтобы убрать привязку всплывающего окна к cookies, необходимо удалить код, который устанавливает и проверяет cookies. Это включает функции setCookie, getCookie, а также проверку cookies в функции window.onload. Для этого удалите следующие участки кода:

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 в функции window.onload и вызов setCookie в функции closePopup:

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. Как настроить анимацию всплывающего окна или отключить её?

Чтобы настроить или отключить анимацию всплывающего окна, нужно изменить свойства CSS в скрипте, отвечающем за анимацию. Анимация задаётся в функции showPopup. Для настройки или отключения анимации измените строку в функции showPopup:

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

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

В строке popup.style.animation = 'fadeInUp 0.5s ease-out, pulse 2s infinite 1s'; параметры задают разные аспекты анимации:

fadeInUp 0.5s ease-out:

• fadeInUp: Название анимации, которая задаёт эффект появления снизу вверх.
• 0.5s: Длительность анимации, в данном случае 0.5 секунды.
• ease-out: Тип анимации, который начинает быстро и замедляется к концу.

pulse 2s infinite 1s:

• pulse: Название второй анимации, которая задаёт пульсирующий эффект.
• 2s: Длительность анимации, в данном случае 2 секунды.
• infinite: Указывает, что анимация должна повторяться бесконечно.
• 1s: Задержка перед началом анимации, в данном случае 1 секунда.

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