Форум

8ответ(ов) в теме
stalker1313
не в сети 4 недели
На сайте с 02.07.2016
Участник
Тем 3
Сообщения 7
1
00:31

Привет. Может кто-нибудь написать скрипт всплывающего окна при посещении сайта с таймером закрытия этого окошка для wp? Такого плана

Вы не можете просматривать опубликованные ссылки

То есть, например, захожу я на сайт. Через 20 секунд появляется окно как на картинке по ссылке, с таймером закрытия (пока время не выйдет никак с сайтом взаимодействовать не получится), когда время заканчивается, появляется крестик + отдельная ссылка (просто текстом в том же окне) для закрытия, но само окно не закрывается, надо именно нажать крестик либо кликнуть ссылку. Если нажать крестик, то при следующем посещении сайта или переходе на другую страницу окно опять через 20 секунд появится. Если кликнуть ссылку, то окно больше не будет показываться

Apocalypse
не в сети 2 дня
На сайте с 27.08.2018
Администратор
Тем 1
Сообщения 72
2
17:01

Вы не можете просматривать опубликованные ссылки

1. HTML

<div class="overlay"></div>
<div class="modal">
<div class="close"></div>
<div class="header">
<h1>Заголовок окна</h1>
</div>
<div class="content"><a href="#">Я - ССЫЛКА. КЛИКНИ МЕНЯ НЕЖНО</a></div>
</div>

2. CSS

body {
background: url(https://phonoteka.org/uploads/posts/2021-06/1624962108_25-phonoteka_org-p-besshovnie-oboi-dlya-saita-krasivo-34.jpg);
overflow: hidden;
}

.overlay {
width: 100%;
height: 100%;
z-index: 100;
top: 0;
left: 0;
position: fixed;
background: #000000aa;
display: none;
}

.modal {
position: fixed;
z-index: 101;
top: 50%;
left: 50%;
width: 500px;
height: 300px;
background: #ffffffaa;
backdrop-filter: blur(3px);
margin-top: -150px;
margin-left: -250px;
border-radius: 3px;
display: none;
text-align: center;
}

.header {
text-align: center;
}

.close {
font-size: 25px;
background: #fff;
width: 25px;
height: 25px;
text-align: center;
padding: 10px 15px 15px 15px;
float: right;
cursor: pointer;
}

.content {
text-align: center;
}

3.jQuery

$ = jQuery;

$(function() {
$('.close').click(function() {
if($(this).text() == 'X') {
$('.overlay, .modal').fadeOut(300);
};
});
$('.content a').click(function() {
localStorage.setItem('modal', 1);
$('.modal').html('<h1>СПАСИБО. РЕКЛАМА ВАС БОЛЬШЕ НЕ ПОБЕСПОКОИТ!</h1>');
setTimeout(function() {
$('.overlay, .modal').fadeOut(300);
}, 3000);
})
});

if(!localStorage.getItem('modal')) {
time = 5, // Через сколько появится реклама
time2 = 20, // Через сколько можно закрыть
intervalId = setInterval(timerDecrement, 1000);
}

function timerDecrement() {
time = time-1;
console.log(time);
if(time == 0) {
clearInterval(intervalId);
$('.overlay, .modal').fadeIn();
intervalId2 = setInterval(timerDecrement2, 1000);
};
};

function timerDecrement2() {
time2 = time2-1;
$('.close').html(time2);
if(time2 == 0) {
clearInterval(intervalId2);
$('.close').html('X');
};
};

stalker1313
не в сети 4 недели
На сайте с 02.07.2016
Участник
Тем 3
Сообщения 7
3
18:25

А можно ещё, что бы при нажатии на эту кнопку:

<button class="button button_type_submit button_size_m button_view_action button__control i-bem button_js_inited" role="button" type="submit"><span class="button__text">Пожертвовать</span></button>

окно больше тоже не появлялось?
Или на сайте проще глянуть: universetoday.ru

Редакции сообщения
01.02.2022 17:15ApocalypseПричина: не указано
stalker1313
не в сети 4 недели
На сайте с 02.07.2016
Участник
Тем 3
Сообщения 7
4
20:29

PS: можно не показывать это окно на мобильных, только на пк что бы появлялось?

Apocalypse
не в сети 2 дня
На сайте с 27.08.2018
Администратор
Тем 1
Сообщения 72
5
17:26

stalker1313 сказал(а)
А можно ещё, что бы при нажатии на эту кнопку:

<button class="button button_type_submit button_size_m button_view_action button__control i-bem button_js_inited" role="button" type="submit"><span class="button__text">Пожертвовать</span></button>

окно больше тоже не появлялось?
Или на сайте проще глянуть: universetoday.ru

Замени код кнопки на этот:

<button class="button button_type_submit button_size_m button_view_action button__control i-bem button_js_inited" role="button" type="submit"><span class="button__text">Пожертвовать</span></button>

Редакции сообщения
01.02.2022 17:26ApocalypseПричина: Поправил описание
Apocalypse
не в сети 2 дня
На сайте с 27.08.2018
Администратор
Тем 1
Сообщения 72
6
17:30

stalker1313 сказал(а)
PS: можно не показывать это окно на мобильных, только на пк что бы появлялось?

Замени строчку

intervalId = setInterval(timerDecrement, 1000);

На:

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {} else {
intervalId = setInterval(timerDecrement, 1000);
}

stalker1313
не в сети 4 недели
На сайте с 02.07.2016
Участник
Тем 3
Сообщения 7
7
00:04

Замени код кнопки на этот:

У меня нет доступа к кнопке, форма с другого сайта подтягивается. Можно как-то другим способом?

Apocalypse
не в сети 2 дня
На сайте с 27.08.2018
Администратор
Тем 1
Сообщения 72
8
14:10

stalker1313 сказал(а)
Можно как-то другим способом?

Нет. Доступ к элементам во фрейме другого домена запрещён политикой безопасности браузеров

Вы не имеете права на публикацию сообщений в этой теме