Решение, как показать модальное окно, когда посетитель покидает сайт, то есть наводит курсор на активную вкладку.
Нужно показать всплывающее окно, когда пользователь наводит курсор на активную вкладку.
Демонстрация
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 »">
<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>