Необходима помощь чтоб разобраться с куками
Доброго времени суток форумчане! Необходима помощь чтоб разобраться с куками. Мне необходимо чтоб баннер показывался пользователю раз в 2 часа. Код сейчас у меня такой
<div id="open" class="modalDialog">
<div>
<a href="#close" onclick="showHideMenu();" title="Закрыть" class="close">X</a>
<div class="hello" style="display:none" id="welcome-window">
<a class="hello-openModal" href="#open" onclick="showHideMenu();" ></a>
<!--banner-->
<!--banner end-->
</div>
</div></div>
<div class="clr"></div>
<script>
(function(){
const timestamp=new Date().getTime(); //miliseconds
const maxInactivePeriod=2; //hours
const cookieName='welcome_window';
/*const cookieName='open';*/
let lastVisit;
try{
lastVisit=+(localStorage.getItem('lastVisit')||timestamp);
localStorage.setItem('lastVisit',timestamp);
}catch(e){
lastVisit=timestamp;
console.error(e);
};
if(
lastVisit+maxInactivePeriod*3600*1000>timestamp &&
document.cookie.indexOf(cookieName)>=0
)
return;
const win=document.getElementById('welcome-window');
/*const win=document.getElementById('open');*/
if(!win)
return;
win.style.display='block';
document.cookie='name='+cookieName+'; path=/;';
})();
window.onload = function(){
document.querySelector('a[href="#open"]').click();
}
</script>
Проблема сейчас такая, при старте страницы сам баннер id="welcome-window" показывается один раз а id="open" вызывается постоянно. welcome-window - код баннера open - код модального окна Подскажите пожалуйста, как скрывать и показывать оба блока. |
Stas1985,
display:none надо ставить на id="open" и от этого плясать, кнопку class="hello-openModal" выкинуть |
Цитата:
- Если нет куков, сделал что нужно и записал куки со сроком жизни 2часа. - Если куки еще есть, ничего не показывай. |
Цитата:
<a href="#close" title="Закрыть" class="close-modalDialog">X</a> Но при этом куки срабатывают и при перезагрузки станицы баннер не показывается |
|
Цитата:
<script>
(function(){
const timestamp=new Date().getTime(); //miliseconds
const maxInactivePeriod=2; //hours
const cookieName='open';
let lastVisit;
try{
lastVisit=+(localStorage.getItem('lastVisit')||timestamp);
localStorage.setItem('lastVisit',timestamp);
}catch(e){
lastVisit=timestamp;
console.error(e);
};
if(
lastVisit+maxInactivePeriod*3600*1000>timestamp &&
document.cookie.indexOf(cookieName)>=0
)
return;
const win=document.getElementById('open');
if(!win)
return;
win.style.display='block';
document.cookie='name='+cookieName+'; path=/;';
})();
window.onload = function(){
document.querySelector('a[href="#open"]').click();
}
</script>
сам модуль вот <div id="open" style="display:none" class="modalDialog"> <div> <a href="#close" title="Закрыть" class="close-modalDialog">X</a> <div class="hello" id="welcome-window"> <a class="hello-openModal" href="#open"></a> <!--banner--> <!--banner end--> </div> </div></div> <div class="clr"></div> |
localStorage показ банера каждые 2 часа
Stas1985,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.modalDialog {
display: none;
}
.modalDialog.open {
display: block;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const limit = 2 * 3600 * 1000; // 2 часа
const localStorageInitTime = localStorage.getItem('localStorageInitTime') || new Date() - limit;
const delta = new Date() - localStorageInitTime;
const close = document.querySelector('.close-modalDialog');
const modalDialog = document.querySelector('.modalDialog');
const openModal = _ => modalDialog.classList.add('open');
const closeModal = _ => {
modalDialog.classList.remove('open');
localStorage.setItem('localStorageInitTime', +new Date());
window.setTimeout(openModal, limit);
};
window.setTimeout(openModal, delta >= limit ? 0 : limit - delta);
close.addEventListener('click', closeModal)
});
</script>
</head>
<body>
<div id="open" class="modalDialog">
<div>
<a href="#close" title="Закрыть" class="close-modalDialog">X</a>
<div class="hello" id="welcome-window">
<!--banner-->
banner banner
<!--banner end-->
</div>
</div></div>
<div class="clr">
</div>
</body>
</html>
|
Получаю ошибку Uncaught TypeError: document.querySelector(...) is null
|
Stas1985,
смотрите какие у вас классы на самом деле |
Вот полностью код баннера
<?php defined('_JEXEC') or die; ?>
<style type="text/css">
.modalDialog {display: none;}
.modalDialog.open {display: block;}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const limit = 2 * 3600 * 1000; // 2 часа
const localStorageInitTime = localStorage.getItem('localStorageInitTime') || new Date() - limit;
const delta = new Date() - localStorageInitTime;
const close = document.querySelector('.close-modalDialog');
const modalDialog = document.querySelector('.modalDialog');
const openModal = _ => modalDialog.classList.add('open');
const closeModal = _ => {
modalDialog.classList.remove('open');
localStorage.setItem('localStorageInitTime', +new Date());
window.setTimeout(openModal, limit);
};
window.setTimeout(openModal, delta >= limit ? 0 : limit - delta);
close.addEventListener('click', closeModal)
});
</script>
<div id="open" class="modalDialog">
<div>
<a href="#close" title="Закрыть" class="close-modalDialog">X</a>
<div class="hello" id="welcome-window">
<!--banner-->
<div class="hello-l">
<div class="hello-l-header">ПОЛИГРАФИЯ «ЛИК»</div>
<div class="hello-l-body"><center><img src="/modules/mod_banner_index_js/assets/css/images/bg-l-body.jpg" alt="ПОЛИГРАФИЯ «ЛИК» - СКИДКИ ДО 50%!"></center></div>
<div class="hello-l-footer">СКИДКИ ДО 50%!</div>
</div>
<div class="hello-r">
<div class="hello-r-header">Акция действительна на распечатку, флаеры, визитки</div>
<div class="hello-r-body">Вопросы по телефону:<br /> 8 (7172) <span>31-00-01</span> <br />www.lik-astana.kz</div>
<div class="hello-r-footer">*Информация, цены, реклама, прочее указанные на данном сайте, согласно ГК РК, не является публичной офертой. Компания не имеет намерения заключить договор на предложенных условиях со всеми, кто отзовется. Компания намерена обсуждать условия сотрудничества с любым кто обратиться с предложением заключить договор.</div>
</div>
<!--banner end-->
</div>
</div></div>
<div class="clr">
</div>
вот его стили _https://lik-astana.kz/modules/mod_banner_index_js/assets/css/style.css вроде все совпадает |
| Часовой пояс GMT +3, время: 03:57. |