Форум

Stas1985 · #1 (**permalink**) 21.06.2021, 09:16

Доброго времени суток форумчане! Необходима помощь чтоб разобраться с куками. Мне необходимо чтоб баннер показывался пользователю раз в 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 - код модального окна
Подскажите пожалуйста, как скрывать и показывать оба блока.

рони · #2 (**permalink**) 21.06.2021, 10:33

Stas1985,
display:none надо ставить на id="open" и от этого плясать, кнопку class="hello-openModal" выкинуть

ksa · #3 (**permalink**) 21.06.2021, 10:40

Сообщение от Stas1985

Подскажите пожалуйста, как скрывать и показывать оба блока.

Для действий с куками можно предложить следующий алгоритм при входе:
- Если нет куков, сделал что нужно и записал куки со сроком жизни 2часа.
- Если куки еще есть, ничего не показывай.

Stas1985 · #4 (**permalink**) 21.06.2021, 11:17

Сообщение от рони

Stas1985,
display:none надо ставить на id="open" и от этого плясать, кнопку class="hello-openModal" выкинуть

Если так делаю то перестает работать кнопка

<a href="#close" title="Закрыть" class="close-modalDialog">X</a>

Но при этом куки срабатывают и при перезагрузки станицы баннер не показывается

рони · #5 (**permalink**) 21.06.2021, 11:48

Stas1985,
https://javascript.ru/forum/css-html...tml#post536170

Stas1985 · #6 (**permalink**) 21.06.2021, 12:11

Сообщение от рони

Stas1985,
https://javascript.ru/forum/css-html...tml#post536170

Уточните пожалуйста подробнее. В js я практически полный ноль. Сейчас скрипт у меня такой.

<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>

рони · #7 (**permalink**) 21.06.2021, 12:35

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>

Stas1985 · #8 (**permalink**) 21.06.2021, 12:47

Получаю ошибку Uncaught TypeError: document.querySelector(...) is null

рони · #9 (**permalink**) 21.06.2021, 13:00

Stas1985,
смотрите какие у вас классы на самом деле

Stas1985 · #10 (**permalink**) 21.06.2021, 13:06

Вот полностью код баннера

<?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 вроде все совпадает

Форум

Справочник

Discord чат

Курсы javascript