Статьи и справочные
материалы
Поискать на сайте
Цитаты и афоризмы:
"Работа не может быть выполнена должным образом, если нет необходимых инструментов."PROCEEDINGS OF THE IEEE, 2/78, р.174
Туча тегов
| Публикаций — | 121 |
| Комментариев — | 607 |
| Пользователей — | 46 |
Вход в систему
Скрипт всплывающего попап окна на jquery (javascript) с блокировкой
Я думаю, все со мной согласятся, что всяческие всплывающие окна с, например, порно рекламой - это плохо. Однако, иногда popup-окошко может неплохо пригодиться. Ведь подавляющее большинство интернет-пользователей - это юзеры непродвинутые. И иногда их следует подталкивать к действию, которое мы от них ждем. Допустим, это будет подписка на рассылку.
В данной заметке я расскажу (и покажу на примере) насколько просто создать всплывающее попап окно с помощью javascript-библиотеки jquery, а так же мы предусмотрим возможность блокировки этого всплывающего окна пользователем. Popup-окошко будет всплывать при посещении страницы сайта, например спустя секунду после ее загрузки. Затем, если посетитель нажмет кнопку закрытия окошка либо выполнит действие, предлагаемое всплыващим окном, попап-окошко заблокируется в cookie браузера и больше этому пользователю показываться не будет. Если он конечно не ушел с сайта сразу при виде всплывающего окна :) И последнее - мы реализуем "разблокировку" нашего всплывающего окна по нажатию определенных кнопок клавиатуры - это будет полезно в первую очередь нам самим при разработке.
Итак, начнем. Пусть у нас есть форма подписки, которую мы хотим разместить в качестве всплывающего попап окна на нашем сайте. Попапом будет блок (к примеру, #adSite), абсолютно спозиционированный относительно общего контейнера - например body. Для этого нужно:
- указать body css-стиль position:relative;
- указать блоку #adSite css-стиль position:absolute;left:100px;top:100px;display:none; - это начальные установки, они потом поменяются скриптом;
- разместить форму подписки в блок #adSite;
- подключить на сайте jquery;
- написать наш скрипт, который будет управлять всплывающим окном, и вставить его туда же в блок #adSite.
Сразу покажу, что у нас получится в конце - пример страницы со всплывающим окном. Вы можете открыть исходный код, чтобы посмотреть как все устроено.
Как это работает: после загрузки страницы плюс 1 секунду запускается функция показа всплывающего окна. Она проверяет наличие в cookie пометки о блокировке всплывающего окна, и если ее нет - показывает попап-окно. Окошко показывается с помощью метода slideDown - то есть как бы выезжает вниз. Затем если пользователь заполнил форму подписки и нажал "Подписаться", то окошко скрывается и в cookie помечается как заблокированное. При последующих перемещениях по сайту или перезагрузке страницы оно показываться не будет. То же самое происходит если посетитель нажал на крестик.
Показать заблокированное всплывающее окно и отменить блокировку - то бишь стереть пометку в cookie - можно, нажав сочетание клавиш ctrl+enter.
Вобщем все вроде просто и разобраться в скрипте нашего всплывающего окна надеюсь вы сможете без труда. С минимальными познаниями в jQuery и javascript.
Комментарии
Как-то невнятно. Хотелось бы побольше деталей!
1 раз только окно можно закрыть? чушь какая то
Здорово!!!А как можно сделать, чтоб по кнопке окно закрывалось, но при следующей загрузке открывалось вновь.!? Например проходит акция на сайте и охота пользователям об этом напоминать...А так один раз увидишь, не поймешь, закроешь и все больше не появится!))
А все нормально, из кода запись в куки убираешь /*setCookie('pop', '1');*/, которая блокировку ставит и все путем)))
есть способ гораздо прикольней и интересней. сделан с помощью диалога, все в модале. красота. и кукой управлять можно.
Возможно ли прописать, чтобы куки автоматически удалялись через несколько дней. Я прописал строчку expire.setTime(today.getTime() + 3600000*24*nDays); , чтобы они удалялись раз в сутки, но не уверен, что это сработает в этом скрипте, а проверить проблематично!:-)
Большое спасибо, пример выручил.
Однако есть задача, не знаю как к ней подступить: в примере используется скрипт jquery.js. На сайтах на WP на многих уже прописана такая библиотека, и если подгружать ту что из примера, то не работает
$(document).ready(function() { showPop(); });- туда не заходит даже. Так вот - как сделать так, чтобы библиотека подгружалась, только если уже не был загружен другой jquery?
PS: Captcha жуткая, восьмой раз ввожу...
тут круче, устанавливаешь блокировку по куки хоть на день хоть на час, и окно fancybox
http://forum.vingrad.ru/forum/topic-326228/kw-cookie.html
дайте рекомендации как сделать всплывающий сайт а не окно подписки на самом сайте
ну, а где сам скрипт-то?
Система PopUp v3.1 является лидирующим скриптом в сфере рекламного бизнеса. За несколько лет разработок, в неё внесены все пожелания клиентов, что делает скрипт самым функциональным из всех аналогов, а так же опыт полученный за это время, сделал скрипт самым безопасным, а так же защищенным от накруток. Скрипт минимизирован и полностью автономен, что даёт возможность установить его даже на самом обычном хостинге.
Скрипт партнёрской программы PopUp v3.1 на данный момент содержит в себе 10 самых распространенных в Интернет видов рекламы, а именно:
PopUp-реклама (переход по кнопке «Закрыть»)
BodyClick-реклама (ClickUnder)
Баннерная реклама
Контекстная реклама
Тизерная реклама
Плавающий блок ссылок
Растяжка (Top-line)
ICQ-window
Peel-down (Уголок)
SLIDER - баннер
Установка системы очень проста, а импорт данных и создание администратора происходит в один шаг с помощью инсталляционного файла. Постоянно ведутся работы по увеличению «пробива», поэтому в системе PopUp v3.1 самый высокий «пробив» из всех подобных скриптов, а многоуровневое шифрование JavaScript кода защищает сайты ваших партнёров от писсимизации в поисковых системах.
В системе идёт общий аккаунт как для вебмастеров, так и для рекламодателей, что позволяет пользователям как покупать, так и продавать трафик. Рекламодателям и вебмастерам предоставляется подробная статистика по переходам, что позволяет им отслеживать и контролировать весь объём трафика.
Установленные модули и возможности PopUp v3.1
Реферальная система – позволяет устанавливать процент за привлечённого пользователя в систему по каждому виду рекламы и тарифу отдельно.
BackTraf – позволяет возвращать ненужный трафик обратно продавцу (не уникальный, прокси, ботов, накрутки).
Модуль GeoIP – модуль распределения трафика по странам, разработанный сотрудниками AdminStation. Не требует установки дополнительного программного обеспечения на ваш сервер и полностью автономен.
Управление проектом – позволяет устанавливать цены за уникальные переходы и создавать тарифы по странам для каждого вида рекламы отдельно, а так же возможность отключить или включить любой вид рекламы.
Новостная лента – позволяет через удобную форму с визуальным редактором вести ленту новостей вашего проекта, доступ к которой получают все посетители вашего сайта.
Комментарии к пользователям и площадкам – есть возможность установки комментария к пользователю или конкретного сайта для заметки, который видит только администратор.
Бухгалтерия – подробный список всех финансовых операций, просмотра выполненных и невыполненных заявок на вывод средств. Содержит горячую кнопку для выплаты, а так же есть возможность генерации XML-файла для массовых выплат в системе WebMoney.
Merchant WebMoney – интерфейс позволяет организовать автоматическое пополнение баланса пользователя.
Управление контентом – позволяет создавать новые страницы сайта, а так же редактировать их через удобный визуальный редактор, указывая ключевые слова и описание отдельно для каждой страницы.
Рассылка пользователям – позволяет делать массовые рассылки всем зарегистрированным пользователям на их e-mail.
Статистика переходов – позволяет видеть количество переходов за любой промежуток времени по всем видам рекламы полностью по системе. А так же кол-во переходов по странам и площадкам.
Управление пользователями – позволяет видеть всех зарегистрированных пользователей системы, с возможностью сортировки и поиска. Предусмотрена возможность редактирования данных пользователя, зачисление и снятие средств с баланса, а так же блокировки.
Чёрный список – позволяет ограничить доступ к вашему проекту по IP или запретить добавление не желаемого сайта в вашу систему.
Мониторинг IP – даёт возможность просмотра всего лога авторизации пользователя по IP и времени входа, а так же находить всех пользователей, которые хоть раз входили с одного указанного IP.
Это только маленький список возможностей скрипта биржи трафика PopUp v3.1. Все возможности и тонкости можете просмотреть в демонстрационной версии по адресу: http://popup.adminstation.ru/ [Login: Admin; Password: demo]
ПРОДАМ ЗА 100$ писать на мыло baly_fire@mail.ru
Блин, очень долго искал скрипт, спасибо!
Ппипец,урок!
Ищи и разберай скрипт сам.Выдерай из страницы и реж....Мда!
Отправить комментарий