Вход

Просмотр полной версии : Правила для всплывающего окна при уходе со страницы.

sheneman
30.06.2015, 16:22
Всем привет вопрос в следующем.
Есть скрипт который вызывает модальное окно при наведение на полосу шириной 1 пиксель в самом верху страницы. Таки образом хочу поймать людей которые уходят с сайта(тянуться закрыть вкладку или перейти на другую).
Нужно к этому скрипту привязать 2 правила.
1. Что бы срабатывал только спустя 30 секунд после открытия сайта.
2. Что бы показывался один раз одному пользователю.

Я понимаю, что для реализации второго пункта, нужно записать в сессию любое значение и сделать проверку на его наличие. Но проблема в том. что я не знаю как реализовать запись при всплывание окна. Запись в сессию хочу сделать php скриптом.
Кто поможет?

Вот скрипт всплывающего окна, при наведение на полосу вверху экрана.

index.php
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<head>
<title>тест</title>
<link type='text/css' href='basic.css' rel='stylesheet' media='screen' />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.simplemodal.js"></script>
<script type="text/javascript" src="init.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div class="notice">проведите курсор выше заголовка</div>
<div style="display: none; padding: 10px;" id="exit_content">
<h1>Я надоедающее окно окно</h1>
</div>
</body>
</html>

init.js
$(document).ready(function() {

$(document).mousemove(function(e) {

if(e.pageY <= 1)
{
$('#exit_content').modal({onOpen: modalOpen, onClose: simplemodal_close});
}

});

});
function modalOpen (dialog) {
dialog.overlay.fadeIn('fast', function () {
dialog.container.fadeIn('fast', function () {
dialog.data.hide().slideDown('fast');
});
});
}
function simplemodal_close (dialog) {
dialog.data.fadeOut('fast', function () {
dialog.container.hide('fast', function () {
dialog.overlay.slideUp('fast', function () {
$.modal.close();
});
});
});
}

Библиотеки и исходники во вложении.
Deff
01.07.2015, 04:49
(function () {
function setcookie(f,e,h){if(h){var g=new Date();g.setTime(g.getTime()+h)}if(f&&e){document.cookie=f+"="+encodeURIComponent(e)+";path=/"+(h?"; expires="+g.toUTCString():"")}else{return false}}
function getcookie(e){var d=new RegExp(e+"=([^;]){1,}");var f=d.exec(document.cookie);if(f){f=f[0].split("=")}else{return false}return f[1]?decodeURIComponent(f[1]):false}
var openSite = getcookie('openSite');
if(openSite) return false;

$(document).ready(function() {
setTimeout(function() {$(document).mousemove(function(e) {
if(getcookie('openSite')) return false;
if(e.pageY <= 1)
{
$('#exit_content').modal({onOpen: modalOpen, onClose: simplemodal_close});
}
});},30000);

});
function modalOpen (dialog) {
setcookie('openSite',1); //Установка признака срабатывания
dialog.overlay.fadeIn('fast', function () {
dialog.container.fadeIn('fast', function () {
dialog.data.hide().slideDown('fast');
});
});
}
function simplemodal_close (dialog) {
dialog.data.fadeOut('fast', function () {
dialog.container.hide('fast', function () {
dialog.overlay.slideUp('fast', function () {
$.modal.close();
});
});
});
}

}());
sheneman
01.07.2015, 09:14
Deff,
Поставил в init.js
не работает(
Кэш чистил, время менял.
Deff
01.07.2015, 15:28
sheneman,
Поправил - скобку забыл
sheneman
01.07.2015, 15:39
Deff,
спасибо, но вот, что получается:
sheneman.ru/7/
Скрипт срабатывает каждый раз пока не обновлю странцу.
Получается, что скрипт считывает метку только при рефреше. А до рефреша он мучает этим окном.
Как поправить?
sheneman
01.07.2015, 15:40
что бы каждый раз попадая на поле, он делал проверку на наличие метки в куке.
Deff
01.07.2015, 16:10
sheneman,
1. Поправил, (я бы убрал задержку отдачи модального окна, запрашиваемого через jquery.simplemodal.js
она уже есть в текущем коде,
});},30000);
ибо тут в коде она регулируется, а так две задержки, причем через jquery.simplemodal.js задержка не регулируется)

=======================

2. Удобней на область наведения поставить свой div c id="open-modal-area" (отпозиционировав его в нужное место с position:absolute и проставив высоту)
Тогда вместо
$(document).mousemove(function(e) {
if(getcookie('openSite')) return false;
if(e.pageY <= 1)
{
$('#exit_content').modal({onOpen: modalOpen, onClose: simplemodal_close});
}
})
Будет
$('#open-modal-area').mousemove(function() {
if(getcookie('openSite')) return false;
$('#exit_content').modal({onOpen: modalOpen, onClose: simplemodal_close});
})
Почему это имеет смысл ? Потому, что наведение по документу может понадобиться еще где-то, а при установке кука срабатывания модального окна оно будет уже запрещено...
sheneman
22.09.2015, 15:23
Подскажите пожалуйста, а как сделать чтобы эта полоса 1px была плавающей при скролинге?
Получается если я проскролил страницу вниз, полоса уходит и скрипт не срабатывает.