Вплывающее окно и таймер?

Question

[Aleksandr]

Суть такая. Есть попап, который появляется через 10 секунд, с этим проблем нету.
Но как реализовать, чтобы, если пользователь кликнул по ссылке в этом попапе, у него больше никогда попап не появлялся.
Если он окно свернул (нажал на крестик), даем неделю, потом еще раз. Если опять свернул, перестаем.

Не могу допереть как это сделать

Answer 1

[Никита Баев]

Используйте куки.
Сначала делаете проверку, кликал ли юзер по ссылке (типа кука isLinkClicked), потом кликал ли он на закрытие (isCloseButtonClicked). Если ничего нет, то показывается попап. Когда юзер кликает на кнопку закрыть, то записывает куку isCloseButtonClicked на 1 неделю, если по ссылке, то записываете куку isLinkClicked на пару лет.

Comments

[Aleksandr]

Можно где-то посмотреть пример? Не получается вникнуть

Answer 2

[keslo]

Работайте через LocalStorage. Заведите объект в котором будете сохранять данные о действиях с окном. Я делал именно так. Пример на основе Bootstrap:

<!-- Modal -->

<button class="btn btn-success btn-lg animate-btn" data-toggle="modal" data-target="#myModal">ВЫЗОВИ МАСТЕРА СЕЙЧАС</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Не нашли что искали?</h4>
      </div>
      <div class="modal-body">
        <!-- Тут контент в модальном окне -->
      </div>
    </div>
  </div>
</div>

<script>
// Через сколько событие модал
var limit = 5000;
// Сбросить данные в localStorage через...
var repeat = 300000;

// При переходе на новую страницу проверяем данные и сбрасываем при необходимости
if (Date.now() - localStorage.getItem('count') > repeat) {
    localStorage.removeItem('count');
    localStorage.removeItem('show');
    console.log('Данные в localStorage сброшены');
};

// Если это первое посещение, то запукает отсчет для события модал
if (localStorage.getItem('count') === null && localStorage.getItem('show') === null) {
    localStorage.setItem('count', Date.now());
    localStorage.setItem('show', 'false');
    
    console.log('Счетчик установлен');
    
    var timer = setInterval( function() {
        var time = localStorage.getItem('count');
        if (Date.now() - time > limit ) {
            console.log('Событие модал');
			$('[data-target="#myModal"]').trigger('click');
            localStorage.setItem('show', 'false');
            
            clearInterval(timer);
        };
    }, 500 );
} else {
    console.log('Событие модал уже было');
}
</script>

Comments

[Aleksandr]

Можно посмотреть?

[keslo]

Александр Котов: набросок идеи здесь - jsfiddle.net/keslo/3tnkcacz

[keslo]

Александр Котов: добавил код в ответ

[Aleksandr]

keslo: Посмотрю, спасибо

[keslo]

Александр Котов: да не за что. На моем месте вы сделали бы тоже самое. Надеюсь пригодиться)