Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.06.2015, 16:22
Новичок на форуме
Отправить личное сообщение для sheneman Посмотреть профиль Найти все сообщения от sheneman
 
Регистрация: 19.05.2015
Сообщений: 8

Правила для всплывающего окна при уходе со страницы.
Всем привет вопрос в следующем.
Есть скрипт который вызывает модальное окно при наведение на полосу шириной 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();
			});
		});
	});
}


Библиотеки и исходники во вложении.
Вложения:
Тип файла: zip modal.zip (23.5 Кб, 26 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 01.07.2015, 04:49
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

(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();
			});
		});
	});
}

}());

Последний раз редактировалось Deff, 01.07.2015 в 16:08.
Ответить с цитированием
  #3 (permalink)  
Старый 01.07.2015, 09:14
Новичок на форуме
Отправить личное сообщение для sheneman Посмотреть профиль Найти все сообщения от sheneman
 
Регистрация: 19.05.2015
Сообщений: 8

Deff,
Поставил в init.js
не работает(
Кэш чистил, время менял.
Ответить с цитированием
  #4 (permalink)  
Старый 01.07.2015, 15:28
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

sheneman,
Поправил - скобку забыл
Ответить с цитированием
  #5 (permalink)  
Старый 01.07.2015, 15:39
Новичок на форуме
Отправить личное сообщение для sheneman Посмотреть профиль Найти все сообщения от sheneman
 
Регистрация: 19.05.2015
Сообщений: 8

Deff,
спасибо, но вот, что получается:
sheneman.ru/7/
Скрипт срабатывает каждый раз пока не обновлю странцу.
Получается, что скрипт считывает метку только при рефреше. А до рефреша он мучает этим окном.
Как поправить?
Ответить с цитированием
  #6 (permalink)  
Старый 01.07.2015, 15:40
Новичок на форуме
Отправить личное сообщение для sheneman Посмотреть профиль Найти все сообщения от sheneman
 
Регистрация: 19.05.2015
Сообщений: 8

что бы каждый раз попадая на поле, он делал проверку на наличие метки в куке.
Ответить с цитированием
  #7 (permalink)  
Старый 01.07.2015, 16:10
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

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});
})
Почему это имеет смысл ? Потому, что наведение по документу может понадобиться еще где-то, а при установке кука срабатывания модального окна оно будет уже запрещено...

Последний раз редактировалось Deff, 01.07.2015 в 16:47.
Ответить с цитированием
  #8 (permalink)  
Старый 22.09.2015, 15:23
Новичок на форуме
Отправить личное сообщение для sheneman Посмотреть профиль Найти все сообщения от sheneman
 
Регистрация: 19.05.2015
Сообщений: 8

Подскажите пожалуйста, а как сделать чтобы эта полоса 1px была плавающей при скролинге?
Получается если я проскролил страницу вниз, полоса уходит и скрипт не срабатывает.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Fancybox: открытие окна при загрузке страницы spo jQuery 6 15.06.2015 16:04
Событие при изменении размера окна в диапазоне (для адаптивной верстки) spo Общие вопросы Javascript 4 02.10.2014 15:51
Как компилировать sass в css при перезагрузки страницы? Armen (X)HTML/CSS 0 21.09.2014 16:21
Отправка на сервер при уходе со страницы. livelover Общие вопросы Javascript 0 14.09.2014 11:52
Генерация формы на стороне клиента при загрузки страницы Corey Общие вопросы Javascript 2 17.09.2013 17:13