Показать сообщение отдельно
  #3 (permalink)  
Старый 29.01.2020, 22:03
Новичок на форуме
Отправить личное сообщение для Allaur Посмотреть профиль Найти все сообщения от Allaur
 
Регистрация: 29.01.2020
Сообщений: 2

Здравствуйте
Не стал создавать дубликат темы. Вопрос примерно тот же.
Есть всплывающее окно, которое появляется после прокрутки до определённого блока.
<script>
$(document).ready(function(){   
    var $element = $('.footer');
    $counter = 0;
$(window).scroll(function() {
  var scroll = $(window).scrollTop() + $(window).height();
  //Если скролл до конца елемента
  //var offset = $element.offset().top + $element.height();
  //Если скролл до начала елемента
  var offset = $element.offset().top;

  if (scroll > offset && $counter == 0) {
    $('#block').fadeIn(500);
    $counter = 1;
  }
});
$('.btn').click(function(){
	$('#block').slideUp();
});

   });
   </script>

#block{
	display: none;
	position: fixed;
	top: 15px;
	right: 15px;
	color: #fff;
	background: #4CAF50;
	padding: 10px;
	border-radius: 5px;
	width: 200px;
	box-shadow: 0 13px 20px -5px #3a3a3a;
	font-family: Arial;
	text-align: center;
}
.btn{
    background: #FF9800;
    border: 2px solid #795548;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    padding: 5px 10px;
    margin-top: 10px;
    font-weight: bold;
}

<div id="block">Текст, написанный в окне<br>
	Просто закройте окно.
	<input type="button" class="btn" value="Закрыть">
</div>

	<div class="footer"><p>Footer</p></div>


Необходимо показывать окно 1 раз за N дней одному посетителю. Для этого есть следующий вариант
<script src="/catalog/view/javascript/jquery.cookie.js"></script>
<script>
$(document).ready(function(){
$("#setCookie").click(function () {
$.cookie("popup", "", { expires:0, path: '/' });
$("#bg_popup").hide();
});
 
if ( $.cookie("popup") == null )
{
setTimeout(function(){
$("#bg_popup").show();
}, 4000)
}
else { $("#bg_popup").hide();
}
});
</script>

#bg_popup{
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;}
   
#popup {
 background: #FF9800;
    border: 2px solid #795548;
    color: #fff;
    border-radius: 5px;
width: 350px;
margin: 25% auto;
padding: 5px 20px;
position: relative;}
   
.close{
display:block;
position:absolute;
top:5px;
right:5px;
width:20px;
height:20px;
color:#555;
background:#1BA600;
cursor:pointer;}

<div id="bg_popup">
  <div id="popup">
  <a  id="setCookie" class="close" href="#" title="Закрыть" onclick="document.getElementById('bg_popup').style.display='none'; return false;">X</a>
<h1>Пример</h1>
<p>Модальное окно с задержкой в 4 секунды, которое появляется раз в сутки.</p>
</div>
</div>


Отдельно оба варианта работают, но не могу их скрестить. Необходимо чтобы при прокрутке до определённого блока всплывало окно и при закрытии окна оно не показывалось одному пользователю в течении N дней. Мало знаний для решения вопроса. Прошу помощи.
Ответить с цитированием