• Страница 1 из 1
  • 1
Модератор форума: Yuri_G  
Сообщество uCoz » Модули uCoz » Дополнительные функции » Всплывающие окна от UCOZ (Помощь в установке и нстройке)
Всплывающие окна от UCOZ
Canon_L
Сообщений: 107
Репутация: 18

Сообщение # 1 | 16:32:38 22 Авг 2024
Добрый день.
Решил попробовать всплывающие окошки UCOZ. Взял широкий баннер по центру экрана.



CSS переписал под себя, а вот скрипт не понимаю как настроить. Хочется что бы окошко не резко появлялось, а плавно из центра с увеличением выезжало.

По инструкции дописал:

Код
popup.style.animation = 'fadeInUp 0.5s ease-out, pulse 2s infinite 1s';


Ни плавный вход, ни пульсация не работают. Возможно не туда вставил. Вот скрипт целиком:

Код
<script>
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());
}

window.popupVisible = false;

function showPopup() {
const popup = document.getElementById('pop-up');
const backdrop = document.getElementById('backdrop');

popup.style.display = 'block';
popup.style.animation = 'fadeInUp 0.5s ease-out, pulse 2s infinite 1s';
backdrop.style.display = 'block';

backdrop.addEventListener('click', closePopup);
document.addEventListener('keydown', keydownHandler);

window.popupVisible = true;

setCookie('popupShown', 'true', 1);
}

function closePopup() {
const popup = document.getElementById('pop-up');
const backdrop = document.getElementById('backdrop');

popup.style.display = 'none';
backdrop.style.display = 'none';

backdrop.removeEventListener('click', closePopup);
document.removeEventListener('keydown', keydownHandler);

window.popupVisible = false;
}

function keydownHandler(event) {
if (event.key === 'Escape' && window.popupVisible) {
closePopup();
}
}

window.onload = function() {
const popupShown = getCookie('popupShown');
if (!popupShown) {
setTimeout(showPopup, 7000);
}
};
</script>


2. И вторая проблема - если кликнуть вне окна, то оно закрывается. Можно ли это отключить и сделать возможным закрытие только по клику на крестик?

Помогите довести до ума! ok
Прикрепления: 43792388.webp (77.2 Kb)
Сообщение отредактировал Canon_L - Четверг, 22 Авг 2024, 16:41:36
ilia_halupko
Сообщений: 238
Репутация: 28

Сообщение # 2 | 21:11:04 22 Авг 2024
Canon_L, проверьте, что CSS-классы fadeInUp определены в вашем CSS-файле, добавить в скрипт строчку недостаточно для корректной работы:

 
Код
animation: fadeInUp 0.5s ease-out;

Чтобы убрать закрытие окна по клику вне зоны поп-апа, достаточно удалить событие click для backdrop. В функции showPopup удалите следующую строку:

Код
backdrop.addEventListener('click', closePopup);

Вот исправленный код:

Код
<script>
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());
}

window.popupVisible = false;

function showPopup() {
    const popup = document.getElementById('pop-up');
    const backdrop = document.getElementById('backdrop');

    popup.style.display = 'block';
    popup.style.animation = 'fadeInUp 0.5s ease-out, pulse 2s infinite 1s';
    backdrop.style.display = 'block';

    document.addEventListener('keydown', keydownHandler);

    window.popupVisible = true;

    setCookie('popupShown', 'true', 1);
}

function closePopup() {
    const popup = document.getElementById('pop-up');
    const backdrop = document.getElementById('backdrop');

    popup.style.display = 'none';
    backdrop.style.display = 'none';

    document.removeEventListener('keydown', keydownHandler);

    window.popupVisible = false;
}

function keydownHandler(event) {
    if (event.key === 'Escape' && window.popupVisible) {
        closePopup();
    }
}

window.onload = function() {
    const popupShown = getCookie('popupShown');
    if (!popupShown) {
        setTimeout(showPopup, 7000);
    }
};
</script>
uCoz Team
Canon_L
Сообщений: 107
Репутация: 18

Сообщение # 3 | 02:14:23 23 Авг 2024
Цитата ilia_halupko ()
Canon_L, проверьте, что CSS-классы fadeInUp определены в вашем CSS-файле, добавить в скрипт строчку недостаточно для корректной работы

Спасибо! Добавил в CSS:

Код
@keyframes fadeIn {
0% {
opacity: 0;
}
to {
opacity:1;
}
}

@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
to {
opacity:1;
}
}


В скрипт:

Код
popup.style.display = 'block';
popup.style.animation = 'fadeIn 0.8s ease-out';
backdrop.style.display = 'block';


Спасибо за помощь! И готовое решение.

Ещё бы информеров насыпали rolleyes Сайту 18 лет, 30 информеров для организации работы катастрофически мало weep

Добавлено (26 Авг 2024, 23:15:16)
---------------------------------------------
Помогите, пожалуйста, разобраться с настройками куки.

С такой настройкой окошко показывается 1 раз в сутки или вообще 1 раз?
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));

Как показывать окошко 1 раз в 4 часа?



Как подружить 2 разных окна с 2 разными информерами в 2х разных модулях?

Например:
$MYINF_101$ - новость в popup
$MYINF_102$ - статья в popup

<?if($MODULE_ID$='news')?>$MYINF_102$<?endif?>
<?if($MODULE_ID$='publ')?>$MYINF_101$<?endif?>

В модуле Новости в окошке показывать популярную статью за день, а в модуле Статьи показывать популярную новость.

Сейчас я так понимаю у двух окошек одинаковые куки, поэтому в одном модуле окно показывается, а в другом уже нет.
Сообщество uCoz » Модули uCoz » Дополнительные функции » Всплывающие окна от UCOZ (Помощь в установке и нстройке)
  • Страница 1 из 1
  • 1
Поиск: