Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.06.2021, 09:16
Кандидат Javascript-наук
Отправить личное сообщение для Stas1985 Посмотреть профиль Найти все сообщения от Stas1985
 
Регистрация: 05.03.2012
Сообщений: 138

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

Stas1985,
display:none надо ставить на id="open" и от этого плясать, кнопку class="hello-openModal" выкинуть
Ответить с цитированием
  #3 (permalink)  
Старый 21.06.2021, 10:40
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,310

Сообщение от Stas1985
Подскажите пожалуйста, как скрывать и показывать оба блока.
Для действий с куками можно предложить следующий алгоритм при входе:
- Если нет куков, сделал что нужно и записал куки со сроком жизни 2часа.
- Если куки еще есть, ничего не показывай.
Ответить с цитированием
  #4 (permalink)  
Старый 21.06.2021, 11:17
Кандидат Javascript-наук
Отправить личное сообщение для Stas1985 Посмотреть профиль Найти все сообщения от Stas1985
 
Регистрация: 05.03.2012
Сообщений: 138

Сообщение от рони Посмотреть сообщение
Stas1985,
display:none надо ставить на id="open" и от этого плясать, кнопку class="hello-openModal" выкинуть
Если так делаю то перестает работать кнопка
<a href="#close" title="Закрыть" class="close-modalDialog">X</a>

Но при этом куки срабатывают и при перезагрузки станицы баннер не показывается
Ответить с цитированием
  #5 (permalink)  
Старый 21.06.2021, 11:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,973

Stas1985,
https://javascript.ru/forum/css-html...tml#post536170
Ответить с цитированием
  #6 (permalink)  
Старый 21.06.2021, 12:11
Кандидат Javascript-наук
Отправить личное сообщение для Stas1985 Посмотреть профиль Найти все сообщения от Stas1985
 
Регистрация: 05.03.2012
Сообщений: 138

Сообщение от рони Посмотреть сообщение
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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,973

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>
Ответить с цитированием
  #8 (permalink)  
Старый 21.06.2021, 12:47
Кандидат Javascript-наук
Отправить личное сообщение для Stas1985 Посмотреть профиль Найти все сообщения от Stas1985
 
Регистрация: 05.03.2012
Сообщений: 138

Получаю ошибку Uncaught TypeError: document.querySelector(...) is null
Ответить с цитированием
  #9 (permalink)  
Старый 21.06.2021, 13:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,973

Stas1985,
смотрите какие у вас классы на самом деле
Ответить с цитированием
  #10 (permalink)  
Старый 21.06.2021, 13:06
Кандидат Javascript-наук
Отправить личное сообщение для Stas1985 Посмотреть профиль Найти все сообщения от Stas1985
 
Регистрация: 05.03.2012
Сообщений: 138

Вот полностью код баннера
<?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 вроде все совпадает
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Необходима помощь! Остановка карусели при наведении курсора мыши. DAZ jQuery 5 11.05.2018 10:49
Прошу помочь разобраться с куками eljakovarkadiy Javascript под браузер 1 13.07.2017 20:51
js -> iframe function , необходима помощь с вызовом функций jojofff Общие вопросы Javascript 4 15.03.2015 12:55
Необходима помощь со скриптом! evgeny_kora Ваши сайты и скрипты 4 10.01.2010 15:57
Global, Button. Необходима Помощь. Nazv Общие вопросы Javascript 1 12.12.2008 16:45