Всплывашка картинка
Pop-up -по центру экрана
- Полностью бесплатно
- 3 версии кода
Лёгкая установка
и редактирование
и редактирование
Отдельная картинка
и ссылка, для десктопа
и моб. версии
и ссылка, для десктопа
и моб. версии
Минималистичный понятный дизайн
Скопируйте целиком. Поменяйте адрес картинки
и ссылки и готово
и ссылки и готово
Как выглядит визуально
На странице для наглядности стоит такой код.
Всплывашка появляется через 20 секунд.
Всплывашка появляется через 20 секунд.
Ссылки и картинки
Для мобильной и десктопной версии прописываются отдельно.
Время
Стандартно стоит:
1) Через 20 сек. всплывает
2) Если закрыл - через 24 часа, снова покажет
3) Если перешёл - через 30 дней, снова покажет
\Всё можно поменять
1) Через 20 сек. всплывает
2) Если закрыл - через 24 часа, снова покажет
3) Если перешёл - через 30 дней, снова покажет
\Всё можно поменять
Закрытие
По крестику или вокруг. Цвет крестика можно менять.
Ошибки
Для понимания, все события отображаются в консоли браузера.
Формат 1
Квадрат - 1x1 - Универсально для десктопа или моб. версии
Формат 2
Горизонтально десктоп:
906 × 507px
Вертикально в моб. версии.
301 × 512px
906 × 507px
Вертикально в моб. версии.
301 × 512px
Десктоп
Горизонтальная занимает не так много пространства, достаточно места для информации
Мобильная
Вертикальная смотрится хорошо, достаточно места для информации
Как поставить на Tilda:
Скопируйте весь код и добавьте
1 вариант - на весь сайт. В настройках сайта, в разделе "Ещё", есть пункт "Html-код для вставки внутрь HEAD"
2 вариант - если у вас выбрана какая-то страница как Header или Footer. Добавьте блок: "T123 - HTML блок". И добавьте весь код туда.
3 вариант - если хотите поставить только на конкретной странице. То на нужной странице - добавьте блок: "T123 - HTML блок". И добавьте весь код туда.
4 вариант - Можно поставить через тег менеджер который вы используйте (Яндекс, Google, Matomo).
Так же проверьте галочку в настройках сайта, в разделе ещё:
2 вариант - если у вас выбрана какая-то страница как Header или Footer. Добавьте блок: "T123 - HTML блок". И добавьте весь код туда.
3 вариант - если хотите поставить только на конкретной странице. То на нужной странице - добавьте блок: "T123 - HTML блок". И добавьте весь код туда.
4 вариант - Можно поставить через тег менеджер который вы используйте (Яндекс, Google, Matomo).
Так же проверьте галочку в настройках сайта, в разделе ещё:
- Подключить jQuery на страницах сайта
Обновите ссылки и ссылки на картинки в тексте
В тексте кода есть подсказки - комментарии.
Адаптируйте дизайн
- Поменяйте цвет крестика, если для вашей картинки не подходит
- Поменяйте цвет тени, если для вашего дизайна так нужно
Протестируйте самостоятельно
Если всё работает - Вы молодец
Как поставить на свой сайт:
Скопируйте весь код и добавьте
1 вариант - Основную библиотеку разместите на хостинге отдельным файлом. Добавьте локальный код в Header или Footer. Отредактируйте пусть к файлу библиотеки.
2 вариант - Добавьте код целиком в Header или Footer.
3 вариант - Можно поставить через тег менеджер который вы используйте (Яндекс, Google, Matomo).
2 вариант - Добавьте код целиком в Header или Footer.
3 вариант - Можно поставить через тег менеджер который вы используйте (Яндекс, Google, Matomo).
Обновите ссылки и ссылки на картинки в тексте
В тексте кода есть подсказки - комментарии.
Адаптируйте дизайн
- Поменяйте цвет крестика, если для вашей картинки не подходит
- Поменяйте цвет тени, если для вашего дизайна так нужно
Протестируйте самостоятельно
Если всё работает - Вы молодец
Полный код v3
PopUP Тень и ❌ + Версии для обхода кэша картинок и ссылок и обновления куков.
Если вы поменяли ссылки\картинки - то просто меняете цифру у версии. Должно меньше кешиться, а куки обнуляться и показываться будет всем.
НО: не используйте есть вам нужно передавать дальше UTM-метку пользователя при переходе по указанной во всплывашке ссылке). Используйте V2, или отредактируйте сроку со ссылкой, что бы она была без модификатора
Если вы поменяли ссылки\картинки - то просто меняете цифру у версии. Должно меньше кешиться, а куки обнуляться и показываться будет всем.
НО: не используйте есть вам нужно передавать дальше UTM-метку пользователя при переходе по указанной во всплывашке ссылке). Используйте V2, или отредактируйте сроку со ссылкой, что бы она была без модификатора
<script>
(function() {
// ============== КОНФИГУРАЦИЯ ============== //
var POPUP_VERSION = 'v1'; // Уникальный идентификатор версии
var DESKTOP_LINK = 'https://ВашаСсылкаДесктоп'; // Ссылка для десктопной версии
var MOBILE_LINK = 'https://ВашаСсылкаМобильная'; // Ссылка для мобильной версии
var DESKTOP_IMAGE = 'https://ВашСайт/КартинкаДесктоп.png'; // Путь к десктопному изображению
var MOBILE_IMAGE = 'https://ВашСайт/КартинкаМоб.png'; // Путь к мобильному изображению
// Стили
var SHADOW_COLOR = 'rgba(0, 0, 0,0.7)'; // Цвет тени попапа (формат: rgba)
var CROSS_COLOR = 'rgba(255,255,255,0.9)'; // Цвет крестика закрытия
// Тайминги
var INITIAL_DELAY = 20000; // 20 секунд миниумум поправаилам - и стандартно - секунд до всплытия
var REOPEN_AFTER_CLOSE = 86400000; // Повторный показ - если закрыл - через 24 часа
var REOPEN_AFTER_CLICK = 2592000000; // Повторный показ - если перешёл - через 30 дней
var COOKIE_LIFETIME = 365; // Дней хранения кук
// ============== СИСТЕМНЫЕ НАСТРОЙКИ ============== //
var POPUP_ID = 'aaateh-popup-root-' + POPUP_VERSION;
var STYLE_ID = 'aaateh-popup-styles-' + POPUP_VERSION;
var GLOBAL_FLAG = '__aaateh_popup_initialized__';
// ============== ЗАЩИТА ОТ ДУБЛИРОВАНИЯ ============== //
if (window[GLOBAL_FLAG] || document.getElementById(POPUP_ID)) {
console.warn('[Popup][' + POPUP_VERSION + '] Дублирующая инициализация заблокирована');
return;
}
window[GLOBAL_FLAG] = true;
// ============== ЛОГГИРОВАНИЕ ============== //
var logger = {
info: function(msg) { console.info('%c[Popup][INFO] ' + msg, 'color: #4CAF50') },
warn: function(msg) { console.warn('%c[Popup][WARN] ' + msg, 'color: #FF9800') },
error: function(msg) { console.error('%c[Popup][ERROR] ' + msg, 'color: #F44336') }
};
// ============== ОСНОВНАЯ ЛОГИКА ============== //
var initializePopup = function() {
try {
logger.info('Начало инициализации');
// 1. СОЗДАНИЕ СТИЛЕЙ
var styles = document.createElement('style');
styles.id = STYLE_ID;
styles.innerHTML =
'.aaateh-popup-overlay {' +
'position: fixed;' +
'top: 0;' +
'left: 0;' +
'width: 100%;' +
'height: 100%;' +
'display: none;' +
'justify-content: center;' +
'align-items: center;' +
'background: rgba(0,0,0,0.5);' +
'z-index: 9999;' +
'padding: 20px;' +
'box-sizing: border-box;' +
'cursor: pointer;' + /* Добавлен курсор-указатель */
'}' +
'.aaateh-popup-container {' +
'position: relative;' +
'max-width: 900px;' +
'max-height: 90vh;' +
'width: 100%;' +
'box-shadow: 0 0 25px 20px ' + SHADOW_COLOR + ';' +
'border-radius: 10px;' +
'overflow: hidden;' +
'cursor: default;' + /* Отключаем курсор-указатель внутри контейнера */
'}' +
'.aaateh-popup-image {' +
'display: none;' +
'width: 100%;' +
'height: auto;' +
'object-fit: contain;' +
'}' +
'.aaateh-desktop-image {' +
'max-width: 900px;' +
'}' +
'.aaateh-mobile-image {' +
'max-width: 400px;' +
'display: none;' +
'}' +
'.aaateh-popup-close {' +
'position: absolute;' +
'top: 20px;' +
'right: 20px;' +
'width: 80px;' +
'height: 80px;' +
'cursor: pointer;' +
'z-index: 10000;' +
'}' +
'.aaateh-popup-close::before,' +
'.aaateh-popup-close::after {' +
'content: "";' +
'position: absolute;' +
'width: 70%;' +
'height: 2px;' +
'background: ' + CROSS_COLOR + ';' +
'top: 50%;' +
'left: 50%;' +
'transform: translate(-50%, -50%) rotate(45deg);' +
'}' +
'.aaateh-popup-close::after {' +
'transform: translate(-50%, -50%) rotate(-45deg);' +
'}' +
'@media (max-width: 767px) {' +
'.aaateh-popup-container {' +
'max-width: 95%;' +
'}' +
'.aaateh-desktop-image {' +
'display: none !important;' +
'}' +
'.aaateh-mobile-image {' +
'display: block !important;' +
'max-width: 100%;' +
'}' +
'.aaateh-popup-close {' +
'top: 10px;' +
'right: 10px;' +
'width: 30px;' +
'height: 30px;' +
'}' +
'}';
document.head.appendChild(styles);
logger.info('Стили добавлены');
// 2. СОЗДАНИЕ HTML-СТРУКТУРЫ
var popup = document.createElement('div');
popup.id = POPUP_ID;
popup.className = 'aaateh-popup-overlay';
popup.innerHTML =
'<div class="aaateh-popup-container">' +
'<img src="' + DESKTOP_IMAGE + '?v=' + POPUP_VERSION + '" ' +
'class="aaateh-popup-image aaateh-desktop-image">' +
'<img src="' + MOBILE_IMAGE + '?v=' + POPUP_VERSION + '" ' +
'class="aaateh-popup-image aaateh-mobile-image">' +
'<div class="aaateh-popup-close"></div>' +
'</div>';
document.body.appendChild(popup);
logger.info('DOM структура создана');
// 3. ЛОГИКА ОБНОВЛЕНИЯ ИЗОБРАЖЕНИЙ
var updateImageVisibility = function() {
var isMobile = window.innerWidth <= 767;
var desktopImg = popup.querySelector('.aaateh-desktop-image');
var mobileImg = popup.querySelector('.aaateh-mobile-image');
desktopImg.style.display = isMobile ? 'none' : 'block';
mobileImg.style.display = isMobile ? 'block' : 'none';
logger.info('Обновление изображений: ' + (isMobile ? 'Мобильное' : 'Десктопное'));
};
// 4. УПРАВЛЕНИЕ COOKIES
var cookieManager = {
set: function(name, value) {
var date = new Date();
date.setTime(date.getTime() + (COOKIE_LIFETIME * 86400000));
document.cookie = name + '_' + POPUP_VERSION + '=' + value + ';expires=' + date.toUTCString() + ';path=/';
logger.info('Установлена кука: ' + name + '=' + value);
},
get: function(name) {
var cookies = document.cookie.split('; ');
var cookieName = name + '_' + POPUP_VERSION + '=';
for (var i = 0; i < cookies.length; i++) {
if (cookies[i].indexOf(cookieName) === 0) {
return cookies[i].substring(cookieName.length);
}
}
return null;
}
};
// 5. ОБРАБОТЧИКИ СОБЫТИЙ
var handleClose = function(e) {
e.stopPropagation();
popup.style.display = 'none';
cookieManager.set('WasClosed', Date.now());
logger.info('Попап закрыт');
};
var handleClick = function(e) {
e.stopPropagation();
var link = window.innerWidth <= 767 ? MOBILE_LINK : DESKTOP_LINK;
window.open(link, '_blank');
cookieManager.set('WasClicked', Date.now());
logger.info('Переход по ссылке: ' + link);
};
// Основное изменение: обработка клика на оверлей
var handleOverlayClick = function(e) {
if (e.target === popup) {
handleClose(e);
}
};
// Назначаем обработчики
popup.querySelector('.aaateh-popup-container').addEventListener('click', handleClick);
popup.querySelector('.aaateh-popup-close').addEventListener('click', handleClose);
popup.addEventListener('click', handleOverlayClick); // Новый обработчик
window.addEventListener('resize', updateImageVisibility);
// 6. ЛОГИКА ПОКАЗА
var showPopup = function() {
var lastShown = cookieManager.get('LastShown');
var wasClicked = cookieManager.get('WasClicked');
var wasClosed = cookieManager.get('WasClosed');
var now = Date.now();
var conditions = {
firstShow: !lastShown,
afterClose: wasClosed && (now - wasClosed > REOPEN_AFTER_CLOSE),
afterClick: wasClicked && (now - wasClicked > REOPEN_AFTER_CLICK),
noAction: !wasClicked && !wasClosed
};
logger.info('Проверка условий показа: ' + JSON.stringify(conditions));
if (conditions.firstShow || conditions.afterClose || conditions.afterClick || conditions.noAction) {
var delay = conditions.firstShow ? INITIAL_DELAY : 0;
setTimeout(function() {
updateImageVisibility();
popup.style.display = 'flex';
cookieManager.set('LastShown', now);
logger.info('Попап показан (задержка ' + delay + 'ms)');
}, delay);
}
};
showPopup();
} catch (error) {
logger.error('Критическая ошибка: ' + error.message + '\n' + error.stack);
}
};
// ============== ЗАГРУЗКА ============== //
var loadPopup = function() {
if (document.readyState === 'complete') {
initializePopup();
} else {
window.addEventListener('load', function() {
initializePopup();
});
}
};
loadPopup();
})();
</script>Полный код v2
PopUP - Тень и ❌ на картинке
<script>
(function() {
if (typeof jQuery === 'undefined') {
var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.6.0.min.js';
script.type = 'text/javascript';
script.onload = function() {
console.log('jQuery загружен');
runAaatehPopupScript();
};
document.head.appendChild(script);
} else {
console.log('jQuery уже загружен');
jQuery(document).ready(runAaatehPopupScript);
}
function runAaatehPopupScript() {
// Объявляем все функции в начале
var setAaatehCookie, getAaatehCookie, updateAaatehImageVisibility, showAaatehPopup;
var popup;
// Функция установки cookie с уникальными именами
setAaatehCookie = function(name, value, days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "expires=" + date.toUTCString();
document.cookie = name + "=" + value + ";" + expires + ";path=/";
};
// Функция получения cookie с уникальными именами
getAaatehCookie = function(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length === 2) return parts.pop().split(";").shift();
return null;
};
// Функция обновления видимости изображения
updateAaatehImageVisibility = function() {
var desktopImage = popup.querySelector('.aaateh-desktop-image');
var mobileImage = popup.querySelector('.aaateh-mobile-image');
if (window.innerWidth <= 767) {
desktopImage.style.display = 'none';
mobileImage.style.display = 'block';
} else {
desktopImage.style.display = 'block';
mobileImage.style.display = 'none';
}
console.log('Видимость изображений aaateh обновлена');
};
// Функция показа всплывающего окна
showAaatehPopup = function() {
console.log('Проверка условий для показа всплывающего окна aaateh');
var lastShown = getAaatehCookie('aaatehPopupLastShown');
var wasClicked = getAaatehCookie('aaatehPopupWasClicked');
var wasClosed = getAaatehCookie('aaatehPopupWasClosed');
console.log('Cookie aaatehPopupLastShown:', lastShown);
console.log('Cookie aaatehPopupWasClicked:', wasClicked);
console.log('Cookie aaatehPopupWasClosed:', wasClosed);
var now = new Date().getTime();
if (!lastShown) {
console.log('Первый визит пользователя aaateh');
setTimeout(function() {
updateAaatehImageVisibility();
popup.style.display = 'flex';
setAaatehCookie('aaatehPopupLastShown', now, 365);
console.log('Всплывающее окно aaateh показано');
}, 20000);
} else if (wasClosed && (now - wasClosed) > (24 * 60 * 60 * 1000)) {
console.log('Пользователь закрыл всплывающее окно aaateh более 24 часов назад');
setTimeout(function() {
updateAaatehImageVisibility();
popup.style.display = 'flex';
setAaatehCookie('aaatehPopupLastShown', now, 365);
}, 20000);
} else if (wasClicked && (now - wasClicked) > (30 * 24 * 60 * 60 * 1000)) {
console.log('Пользователь кликнул по всплывающему окну aaateh более 30 дней назад');
setTimeout(function() {
updateAaatehImageVisibility();
popup.style.display = 'flex';
setAaatehCookie('aaatehPopupLastShown', now, 365);
}, 20000);
} else if (!wasClicked && !wasClosed) {
console.log('Пользователь не делал действий с окном aaateh, показываем снова');
setTimeout(function() {
updateAaatehImageVisibility();
popup.style.display = 'flex';
setAaatehCookie('aaatehPopupLastShown', now, 365);
}, 20000);
} else {
console.log('Условия для показа окна aaateh не выполнены');
}
};
try {
console.log('Инициализация скрипта aaateh начата');
// Создаем стили с уникальными названиями классов
var styles = document.createElement('style');
styles.innerHTML =
'.aaateh-popup-overlay {' +
'position: fixed;' +
'top: 0;' +
'left: 0;' +
'width: 100%;' +
'height: 100%;' +
'display: none;' +
'justify-content: center;' +
'align-items: center;' +
'z-index: 9999;' +
'padding: 20px;' +
'}' +
'.aaateh-popup-container {' +
'position: relative;' +
'cursor: pointer;' +
'max-width: 90%;' +
'max-height: 90vh;' +
'box-shadow: 0 0 25px 20px rgba(0, 0, 0, 0.7);' +
'border-radius: 10px;' +
'}' +
'.aaateh-popup-image {' +
'display: block;' +
'width: 100%;' +
'max-width: 900px;' +
'height: auto;' +
'object-fit: contain;' +
'}' +
'.aaateh-popup-close {' +
'position: absolute;' +
'top: 0;' +
'right: 0;' +
'width: 80px;' +
'height: 80px;' +
'cursor: pointer;' +
'z-index: 10000;' +
'}' +
'.aaateh-popup-close::before, ' +
'.aaateh-popup-close::after {' +
'content: "";' +
'position: absolute;' +
'top: 50%;' +
'left: 50%;' +
'width: 46px;' +
'height: 4px;' +
'background-color: rgba(255, 255, 255, 0.9);' +
'transform-origin: center;' +
'}' +
'.aaateh-popup-close::before {' +
'transform: translate(-50%, -50%) rotate(45deg);' +
'}' +
'.aaateh-popup-close::after {' +
'transform: translate(-50%, -50%) rotate(-45deg);' +
'}' +
'.aaateh-popup-close.hidden::before, ' +
'.aaateh-popup-close.hidden::after {' +
'display: none;' +
'}' +
'@media (max-width: 767px) {' +
'.aaateh-popup-close {' +
'width: 50px;' +
'height: 50px;' +
'}' +
'.aaateh-popup-close::before, ' +
'.aaateh-popup-close::after {' +
'width: 35px;' +
'}' +
'.aaateh-popup-image {' +
'max-width: 300px;' +
'}' +
'}';
document.head.appendChild(styles);
console.log('Стили aaateh добавлены');
// Создаем разметку для всплывающего окна с уникальными классами
popup = document.createElement('div');
popup.className = 'aaateh-popup-overlay';
popup.innerHTML =
'<div class="aaateh-popup-container">' +
'<img src="https://aaateh.tochkadostupa.pro/popup_img/1whiteconf.jpg" ' +
'class="aaateh-popup-image aaateh-desktop-image" ' +
'alt="Popup" ' +
'style="display: none;">' +
'<img src="https://aaateh.tochkadostupa.pro/popup_img/1whiteconf_mob.jpg" ' +
'class="aaateh-popup-image aaateh-mobile-image" ' +
'alt="Popup" ' +
'style="display: none;">' +
'<div class="aaateh-popup-close"></div>' +
'</div>';
document.body.appendChild(popup);
console.log('Всплывающее окно aaateh добавлено');
// Добавление слушателей событий для закрытия окна и перехода по ссылке
var desktopImage = popup.querySelector('.aaateh-desktop-image');
var mobileImage = popup.querySelector('.aaateh-mobile-image');
desktopImage.addEventListener('click', function(e) {
e.stopPropagation();
setAaatehCookie('aaatehPopupWasClicked', new Date().getTime(), 365);
window.open('https://t.me/+BMdjJT7YqWY1NjY6', '_blank');
});
mobileImage.addEventListener('click', function(e) {
e.stopPropagation();
setAaatehCookie('aaatehPopupWasClicked', new Date().getTime(), 365);
window.open('https://t.me/+BMdjJT7YqWY1NjY6', '_blank');
});
// Кнопка закрытия
popup.querySelector('.aaateh-popup-close').addEventListener('click', function(e) {
e.stopPropagation();
popup.style.display = 'none';
setAaatehCookie('aaatehPopupWasClosed', new Date().getTime(), 365);
console.log('Всплывающее окно aaateh закрыто по кнопке');
});
// Закрытие окна при клике на overlay
popup.addEventListener('click', function() {
popup.style.display = 'none';
setAaatehCookie('aaatehPopupWasClosed', new Date().getTime(), 365);
console.log('Всплывающее окно aaateh закрыто по клику на overlay');
});
// Инициализация показа всплывающего окна
showAaatehPopup();
} catch (error) {
console.error('Ошибка в скрипте aaateh:', error);
}
}
})();
</script> Полный код v1
PopUP без тени
<script>
(function() {
if (typeof jQuery === 'undefined') {
var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.6.0.min.js';
script.type = 'text/javascript';
script.onload = function() {
console.log('jQuery загружен');
runAaatehPopupScript();
};
document.head.appendChild(script);
} else {
console.log('jQuery уже загружен');
jQuery(document).ready(runAaatehPopupScript);
}
function runAaatehPopupScript() {
// Объявляем все функции в начале
var setAaatehCookie, getAaatehCookie, updateAaatehImageVisibility, showAaatehPopup;
var popup;
// Функция установки cookie с уникальными именами
setAaatehCookie = function(name, value, days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "expires=" + date.toUTCString();
document.cookie = name + "=" + value + ";" + expires + ";path=/";
};
// Функция получения cookie с уникальными именами
getAaatehCookie = function(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length === 2) return parts.pop().split(";").shift();
return null;
};
// Функция обновления видимости изображения
updateAaatehImageVisibility = function() {
var desktopImage = popup.querySelector('.aaateh-desktop-image');
var mobileImage = popup.querySelector('.aaateh-mobile-image');
if (window.innerWidth <= 767) {
desktopImage.style.display = 'none';
mobileImage.style.display = 'block';
} else {
desktopImage.style.display = 'block';
mobileImage.style.display = 'none';
}
console.log('Видимость изображений aaateh обновлена');
};
// Функция показа всплывающего окна
showAaatehPopup = function() {
console.log('Проверка условий для показа всплывающего окна aaateh');
var lastShown = getAaatehCookie('aaatehPopupLastShown');
var wasClicked = getAaatehCookie('aaatehPopupWasClicked');
var wasClosed = getAaatehCookie('aaatehPopupWasClosed');
console.log('Cookie aaatehPopupLastShown:', lastShown);
console.log('Cookie aaatehPopupWasClicked:', wasClicked);
console.log('Cookie aaatehPopupWasClosed:', wasClosed);
var now = new Date().getTime();
if (!lastShown) {
console.log('Первый визит пользователя aaateh');
setTimeout(function() {
updateAaatehImageVisibility();
popup.style.display = 'flex';
setAaatehCookie('aaatehPopupLastShown', now, 365);
console.log('Всплывающее окно aaateh показано');
}, 20000);
} else if (wasClosed && (now - wasClosed) > (24 * 60 * 60 * 1000)) {
console.log('Пользователь закрыл всплывающее окно aaateh более 24 часов назад');
setTimeout(function() {
updateAaatehImageVisibility();
popup.style.display = 'flex';
setAaatehCookie('aaatehPopupLastShown', now, 365);
}, 20000);
} else if (wasClicked && (now - wasClicked) > (30 * 24 * 60 * 60 * 1000)) {
console.log('Пользователь кликнул по всплывающему окну aaateh более 30 дней назад');
setTimeout(function() {
updateAaatehImageVisibility();
popup.style.display = 'flex';
setAaatehCookie('aaatehPopupLastShown', now, 365);
}, 20000);
} else if (!wasClicked && !wasClosed) {
console.log('Пользователь не делал действий с окном aaateh, показываем снова');
setTimeout(function() {
updateAaatehImageVisibility();
popup.style.display = 'flex';
setAaatehCookie('aaatehPopupLastShown', now, 365);
}, 20000);
} else {
console.log('Условия для показа окна aaateh не выполнены');
}
};
try {
console.log('Инициализация скрипта aaateh начата');
// Создаем стили с уникальными названиями классов
var styles = document.createElement('style');
styles.innerHTML =
'.aaateh-popup-overlay {' +
'position: fixed;' +
'top: 0;' +
'left: 0;' +
'width: 100%;' +
'height: 100%;' +
'display: none;' +
'justify-content: center;' +
'align-items: center;' +
'z-index: 9999;' +
'padding: 20px;' +
'}' +
'.aaateh-popup-container {' +
'position: relative;' +
'cursor: pointer;' +
'max-width: 90%;' +
'max-height: 90vh;' +
'}' +
'.aaateh-popup-image {' +
'display: block;' +
'width: 100%;' +
'max-width: 900px;' +
'height: auto;' +
'object-fit: contain;' +
'}' +
'.aaateh-popup-close {' +
'position: absolute;' +
'top: 0;' +
'right: 0;' +
'width: 80px;' +
'height: 80px;' +
'cursor: pointer;' +
'z-index: 10000;' +
'}' +
'@media (max-width: 767px) {' +
'.aaateh-popup-close {' +
'width: 50px;' +
'height: 50px;' +
'}' +
'.aaateh-popup-image {' +
'max-width: 300px;' +
'}' +
'}';
document.head.appendChild(styles);
console.log('Стили aaateh добавлены');
// Создаем разметку для всплывающего окна с уникальными классами
popup = document.createElement('div');
popup.className = 'aaateh-popup-overlay';
popup.innerHTML =
'<div class="aaateh-popup-container">' +
'<img src="https://aaateh.tochkadostupa.pro/popup_img/2spbprompt.png" ' +
'class="aaateh-popup-image aaateh-desktop-image" ' +
'alt="Popup" ' +
'style="display: none;">' +
'<img src="https://aaateh.tochkadostupa.pro/popup_img/2spbprompt_mob.png" ' +
'class="aaateh-popup-image aaateh-mobile-image" ' +
'alt="Popup" ' +
'style="display: none;">' +
'<div class="aaateh-popup-close"></div>' +
'</div>';
document.body.appendChild(popup);
console.log('Всплывающее окно aaateh добавлено');
// Добавление слушателей событий для закрытия окна и перехода по ссылке
var desktopImage = popup.querySelector('.aaateh-desktop-image');
var mobileImage = popup.querySelector('.aaateh-mobile-image');
desktopImage.addEventListener('click', function(e) {
e.stopPropagation();
setAaatehCookie('aaatehPopupWasClicked', new Date().getTime(), 365);
window.open('https://spbprompt.ru/?utm_source=popup&utm_medium=suroviy&utm_campaign=sale&erid=2VSb5xoZxv4', '_blank');
});
// Выше десктоп а ниже мобилка ссылки
mobileImage.addEventListener('click', function(e) {
e.stopPropagation();
setAaatehCookie('aaatehPopupWasClicked', new Date().getTime(), 365);
window.open('https://spbprompt.ru/?utm_source=popup&utm_medium=suroviy&utm_campaign=sale&erid=2VSb5xoZxv4', '_blank');
});
// Кнопка закрытия
popup.querySelector('.aaateh-popup-close').addEventListener('click', function(e) {
e.stopPropagation();
popup.style.display = 'none';
setAaatehCookie('aaatehPopupWasClosed', new Date().getTime(), 365);
console.log('Всплывающее окно aaateh закрыто по кнопке');
});
// Закрытие окна при клике на overlay
popup.addEventListener('click', function() {
popup.style.display = 'none';
setAaatehCookie('aaatehPopupWasClosed', new Date().getTime(), 365);
console.log('Всплывающее окно aaateh закрыто по клику на overlay');
});
// Инициализация показа всплывающего окна
showAaatehPopup();
} catch (error) {
console.error('Ошибка в скрипте aaateh:', error);
}
}
})();
</script>