Всплывающее окно при уходе с сайта

Решение, как показать модальное окно, когда посетитель покидает сайт, то есть наводит курсор на активную вкладку.

Нужно показать всплывающее окно, когда пользователь наводит курсор на активную вкладку.

Демонстрация

1 В тегах <head>…</head> вставить путь к ouibounce.min.css

<link rel="stylesheet" href="ouibounce.min.css">

2 Перед тегом </body> прописать пути к следующим файлам:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="../build/ouibounce.js"></script>

3 В нужном месте в пределах тега <body> код окна с формой:

<div id="ouibounce-modal">
      <div class="underlay"></div>
      <div class="modal">
        <div class="modal-title">
          <h3>This is a OuiBounce modal!</h3>
        </div>

        <div class="modal-body">
          <p>A doge is an elected chief of state lordship, the ruler of the Republic in many of the Italian city states during the medieval and renaissance periods, in the Italian "crowned republics".</p>
          <p>The word is from a Venetian word that descends from the Latin dux (as do the English duke and the standard Italian duce and duca), meaning "leader", especially in a military context. The wife of a doge is styled a dogaressa. <a href="https://en.wikipedia.org/wiki/Doge" target="blank">[1]</a></p>

          <form>
            <input type="text" placeholder="you@email.com">
            <input type="submit" value="learn more &raquo;">
            <p class="form-notice">*this is a fake form</p>
          </form>
        </div>

        <div class="modal-footer">
          <p>no thanks</p>
        </div>
      </div>
    </div>

4 Скрипт инициализации с настройками — попап срабатывает при каждой загрузке страницы:

<script>
  // if you want to use the 'fire' or 'disable' fn,
  // you need to save OuiBounce to an object
  var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
    aggressive: true,
    timer: 0,
    callback: function() { console.log('ouibounce fired!'); }
  });

  $('body').on('click', function() {
    $('#ouibounce-modal').hide();
  });

  $('#ouibounce-modal .modal-footer').on('click', function() {
    $('#ouibounce-modal').hide();
  });

  $('#ouibounce-modal .modal').on('click', function(e) {
    e.stopPropagation();
  });
</script>

5 Скрипт инициализации с настройками — попап срабатывает только один раз, состояние записывается в куки:

<script>
// if you want to use the 'fire' or 'disable' fn,
// you need to save OuiBounce to an object
var _ouiBounce = ouibounce(document.getElementById('ouibounce-modal'), {
cookieExpire: 10,
timer: 0,
callback: function() { console.log('ouiBounce fired!'); }
});

$('.underlay').on('click', function() {
$('#ouibounce-modal').hide();
_ouiBounce.disable({ cookieExpire: 5, sitewide: true });

});

$('#ouibounce-modal .modal-footer').on('click', function() {
$('#ouibounce-modal').hide();
_ouiBounce.disable({ cookieExpire: 5, sitewide: true });
});

$('#ouibounce-modal .modal').on('click', function(e) {
e.stopPropagation();
});
</script>
Продолжая использовать веб- сайт beta-code.ru, вы даете согласие на обработку файлов cookie, пользовательских данных (сведения о местоположении; тип и версия ОС; тип и версия Браузера; тип устройства и разрешение его экрана; источник откуда пришел на сайт пользователь; с какого сайта или по какой рекламе; язык ОС и Браузера; какие страницы открывает и на какие кнопки нажимает пользователь; ip-адрес) в целях функционирования сайта, проведения ретаргетинга и проведения статистических исследований и обзоров. Если вы не хотите, чтобы указанные данные обрабатывались, покиньте сайт.
Принять