- 02 Авг 2015г
- 15120
- 81
- Рубрика: Web-дизайн
Всплывающее окно при загрузке странице показывается один раз с задержкой

Доброго времени суток. 🙂
Данную статью пишу благодаря одному из посетителей моего сайта - Александру Зарко. Александр в одной из статей про модальные окна, задал вопрос, как сделать так, чтобы окно появлялось лишь один раз для каждого посетителя? Так же оно должно появляться с задержкой. У меня есть урок - Всплывающее модальное окно при загрузке сайта с задержкой, но появляется оно постоянно, при каждой загрузке страницы. Возможно для лендинга это нормально, но для многостраничного сайта - это кошмар, потому как посетителя просто будет напрягать постоянное открытие окна при загрузке каждой из них.
Поэтому встал вопрос, как к нему прикрутить куки(cookie), чтобы окно появлялось хотя бы раз в сутки, ну или больше если это нужно. Чтобы это сделать, нужно немного вносить изменения и скрипты будут отличаться от предыдущей статьи, так что выложу все заново уже как надо, чтобы всем было понятно.

Для начала добавляем HTML разметку, то бишь код самого окна. Внутрь окна добавляете все что Вам нужно и все, что хотите увидеть. Главное что нельзя трогать - это кнопка закрытия окна. Наш будущий скрипт будет записывать куки, как раз после нажатия на нее. То есть когда посетитель нажал на крестик, браузер запомнит, что окошко больше не показывать.
<div id="bg_popup"> <div id="popup"> <a id="setCookie" class="close" href="#" title="Закрыть" onclick="document.getElementById('bg_popup').style.display='none'; return false;">X</a> <h1>Пример</h1> <p>Модальное окно с задержкой в 4 секунды, которое появляется раз в сутки.</p> </div> </div>
Далее в файле стилей задаем внешний вид и корректность отображения нашего окна.
/*Модальное окно*/ #bg_popup{ position: fixed; z-index: 99999; background: rgba(0, 0, 0, 0.8); top: 0; right: 0; bottom: 0; left: 0; display: none;} #popup { background:#fff; width: 350px; margin: 25% auto; padding: 5px 20px; position: relative;} .close{ display:block; position:absolute; top:5px; right:5px; width:20px; height:20px; color:#555; background:#1BA600; cursor:pointer;}
Третьим шагом будет уже подключение скриптов. Для начала нужно подключить библиотеку jQuery в шапку перед закрывающимся head или в подвал перед закрывающимсяbody. Но сначала посмотрите, не сделано ли это ранее, иначе возможен конфликт.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Дальше подключаем файл запись на куки. Данный файл нужно скачать - jquery.cookie.js
Подключить файл куков нужно после библиотеки указав путь к папке, где вы его расположили, если он находится в той же папке где и файл с html, то просто его название.
<script src="jquery.cookie.js"></script>
В конце осталось лишь добавить скрипт, который будет все это обрабатывать.
<script type="text/javascript"> $(document).ready(function(){ $("#setCookie").click(function () { $.cookie("popup", "24house", {expires: 0} ); $("#bg_popup").hide(); }); if ( $.cookie("popup") == null ) { setTimeout(function(){ $("#bg_popup").show(); }, 4000) } else { $("#bg_popup").hide(); } }); </script>
Во второй строке указываем айди кнопки закрытия, после нажатия на которую будут записаны куки.
В четвертой строке задаем время, сколько будут хранится куки. В данном случаи окно будет появляться раз в сутки. Если нужно больше, то просто измените в третьей строке значения, например на 3 дня:
$.cookie("popup", "3", {expires: 3} );
Для тех, кому нужно не в днях, а в минутах, то 4 строку нужно заменить на вот такие три строки:
var date = new Date(); date.setTime(date.getTime() + (60 * 1000)); $.cookie("popup", "", {expires: date} );
60 * 1000 - это одна минута, 60 * 3000 - это три минуты, ну и так далее.
Также в скрипте есть значение 4000 - это миллисекунды и равно все это 4 секундам. Это время задержки появления окна. По нужде меняете и окно появится в нужный момент.
Вот и все, что нужно сделать. Мы к старому окну добавили новый скрипт и куки. Окно подключать можно любое, главное указать в последнем скрипте ID кнопки закрытия, в данном случаи - #setCookie, и указать ID окна, сейчас - #bg_popup. Любое окно будет появляться с задержкой и только один раз.
Есть еще один момент. Куки будут работать, если Вы загрузите все это на хостинг. На локальном хранилище работать может только в Мозиле в то время как Хром и Опера будут постоянно показывать окно. Когда-то я уже с этим сталкивался и потратил не мало времени, так что, чтобы проверить нужно делать это прям на сайте, а не запускать с рабочего стола.
На этом все, спасибо за внимание. 🙂
Комментариев: 3
Все работает!
Большое Вам человеческое СПАСИБО!
Отличный сайт!
+++++
Комментариев: 513
Спасибо. Рад что помог 🙂
Комментариев: 2
Большое спасибо, все работает!
Хотелось бы еще понять как установить не дни а минуты?!
Комментариев: 513
Для Вас добавил в статье, читайте 🙂 Замените 4 строку на три новых и укажите количество минут.
Комментариев: 2
Огромное спасибо, за оперативность, все работает. Я только учусь js и многое недопонимаю возникла другая проблема, #setCookie я ставлю в кнопку формы Перезвоните мне и форма закрывается без отправки данных. Как убираю id форма работает но не работает cookie. Буду благодарен если сможете помочь. С уважением Борис.
Комментариев: 513
#setCookie - это айди кнопки закрытия, когда на нее нажимаешь и происходит запись куков. А я не совсем понял, что Вам нужно, напишите мне в скайп, попробуем решить Вашу проблему.
Комментариев: 1
Большое спасибо, все работает!
Подскажите пожалуйста, как еще реализовать такое, если в тексте окна есть ссылка на внутреннюю страницу, чтоб при нажатии на нее куки тоже срабатывали (окно не появлялось на следующей странице)
Попробовал сделать так:
ссылка
Не получилось!
Комментариев: 513
Здравствуйте.
Ссылке на внутренюю страницу добавьте айди, например id="setCookie2",
а во второй строке скрипта добавтье через запятую этот айди:
$("#setCookie, #setCookie2").click(function () {
Комментариев: 1
Довго шукав робоче попап вікно. Це єдине, яке підійшло! Дуже вдячний
Комментариев: 513
Радий, що зміг допомогти, Успіхів!
Комментариев: 1
Спасибо за статью!
Мне только не понятно вот тут:
if ( $.cookie("popup") == null )
{ setTimeout(function(){ $("#bg_popup").show();}, 4000)}
else { $("#bg_popup").hide();
}
Зачем нужна ветка else? Мы ведь не даем команду на показ окна, зачем давать команду на его скрытие? Впрочем, пробую, возможно, найду объяснение в процессе)
});
Комментариев: 513
Почему не даем?
У нас условие, если куки пустые, показать окно через 4 секунды, иначе не показывать.
$("#bg_popup").show();}, 4000) разве это не команда на показ окна?
Комментариев: 1
Куки прикручен к кнопке закрыть, можно его прикрутить к посещению на страницу? очень неудобно когда в самом модальном окне есть ссылка, при переходе по ней, когда возращаюсь обратно модальное окно все равно остается. Заранее спасибо
Комментариев: 513
Ну так добавьте вашей ссылке ID например id="linkcookie". Потом в скрипте в 3 строке замените setCookie на linkcookie и у Вас получится
$("#linkcookie").click(function () {
В итоге при нажатии на ссылку будет совершен переход + запись в куки и окно не появится. Вот и все 🙂
Комментариев: 1
Здравствуйте, скажите, как вызывать cookie после того как пользователь находится на сайте более 3-х минут? При этом не важно на какой именно странице и обновлял ли он браузер. Спасибо
Комментариев: 8
Доброго времени суток! А возможно ли реализовать хранение куки не в часах, днях и минутах, а в сессии, то есть куки живет только одну сессию, при закрытии окна куки затираются, а при новом заходе на сайт, окно снова выскакивало? Спасибо!
Комментариев: 8
Если я правильно понимаю, нужно сделать как то так?
$.cookie("popup" );
Комментариев: 513
Вам нужно просто удалить любое упоминание времени и тогда будет до конца сессии. Верхняя часть кода будет выглядеть так:
$(document).ready(function(){
$("#setCookie").click(function () {
$.cookie("popup", "", {expires: 0} );
$("#bg_popup").hide();
});
Комментариев: 8
Спасибо, все работает!
Комментариев: 2
здравствуйте, у меня не работает, в окне стоит iframe, когда прикручиваю куки окно просто не работает, не показывается, ни на мобильных приложениях ни в браузерах
Комментариев: 513
Перепроверьте все еще раз и очень внимательно. Скорее всего где-то допустили ошибку. Так же, возможно, окно уже записало куки и так как оно показывается 1 раз в сутки, больше и не появляется.
Комментариев: 2
и та же история, ну разумеется все куки были вычищены, разные браузеры, разные компы, как только ставлю куки скрипт не работает, сам не пойму из-за чего
Комментариев: 513
Еще момент. Проверять нужно только на хостинге. Запуская, например, с рабочего стола, то есть локально - работать не будет.
Комментариев: 1
Приветствую! Необходимо при заходе на сайт нового посетителя (в идеале раз в сутки) открывать логотип на весь экран (адаптивно, рисунок болооого размера имеется), и закрывать при клике в любой точке экране. Не подскажете код? Спасибо.
Комментариев: 513
Сделать это возможно, сложного ничего нет, но так сразу не подскажу ибо нужно сесть и написать. Готового кода у меня нет. Причем нужно переделать попросту материал с этой статьи и все.
Комментариев: 2
что то не совсем понятно как переделать чтоб по времени было а не на сутки
var date = new Date();
date.setTime(date.getTime() + (60 * 1000));
$.cookie("popup", "", {expires: date} );
Комментариев: 513
Да. 4 строку меняйте на этот код только указывайте нужное время и все. В статье же написано что
- 60 * 1000 - это одна минута, 60 * 3000 - это три минуты, ну и так далее.
Комментариев: 2
я поменял , эту строчку $.cookie("popup", "24house", {expires: 0} );
на это var date = new Date();
date.setTime(date.getTime() + (60 * 1000));
$.cookie("popup", "", {expires: date} );
и ничего не происходит , Вы можете показать пример ?
Комментариев: 513
Ну. Теперь Ваши куки записало на 1 минуту. Через минуту они станут недействительны и при перезагрузке окно вновь появится.
Комментариев: 1
Виталий, огромное Вам спасибо за этот чудесный сайт! Все статьи с примерами действительно рабочие, что является большой редкостью в наше время. В свое время в интернете перелопатил море сайтов в поисках подобных Вашему, чтобы все было расписано понятным языком для новичка и при этом работало - Ваш сайт уникален!), все разжевано и в рот юзеру положено. Я в восторге! :))) Спасибо огромное еще раз!
Комментариев: 513
Спасибо и Вам за приятные слова. Рад, что тружусь не зря 🙂
Комментариев: 4
Здравствуйте, Виталий! Реализовал ваше окошко на работающем сайте (на хостинге). В FF и Chrome работает все, как надо - появляется только на главной странице, значение для cookies поставил 5 минут, а вот в IE почему-то окошко не появляется, IE11. С чем это может быть связано?
Комментариев: 513
Честно, даже не хочу разбираться. Имбицилы сидящие на ИЕ11, на сегодняшний день их 2-5%(включая Эдж) от всех браузеров интернета. Если у этих людей не хватило клеток головного мозга поставить современный браузер, стараться ради них и тратить свое драгоценное время 🙂 Я еще года 3 назад забил на ИЕ по совету немало опытного коллеги вебдизайнера. Ни разу не пожалел. ИЕ11 мертв, некрофилией я не занимаюсь и вам советую забить на это. Поверьте, оно того не стоит. Цените свое время 🙂
Комментариев: 4
)) Я вас понимаю. Меня самого IE интересует только благодаря своему внедренному новостному порталу, в смысле поучить нативный американский английский... Это все перфекционизм dbyjdfn, все хочется довести до абсолюта, даже IE.
Комментариев: 513
Ну тогда смотрите все ли правильно сделали. Открыл эту статью в ИЕ11 окно появилось. Нажал крестик больше не появляется куки записались. Обновил, все окна нет 🙂 Кстати, может и у Вас так же? Вы закрыли крестиком, а теперь у Вас окно и не появляется. 🙂
Комментариев: 4
Простите за беспокойство, все работает http://mebteh.com.ua/ Это какие-то мои собственные глюки. Большое спасибо. Ваш сайт будет в закладках.
Комментариев: 513
Рад, что вы смогли найти нужную информацию на сайте 🙂
Комментариев: 1
Виталий, отличная статья можно сказать прям то что искал без всяких arcticmodal и тому подобного ! Возможно ли сделать все тоже самое только скрипт обработчик при закрытии сайта ?
P.S Заране спасибо за ответ
Комментариев: 513
Вот написал статью об этом http://gnatkovsky.com.ua/vsplyvayushhie-modalnye-okna-pri-zakrytii-vkladki.html Окно появляется когда курсор покидает область страницы.
Комментариев: 1
Виталий, есть у меня скрипт показа модального окна, все устраивает, хотел прикрутить ваш скрипт по с куками, но что то у меня не получилось может подскажите как это сделать, я вышлю свой код вам на почту.
Комментариев: 513
Отправляйте, жду. Попробую помочь 🙂
Комментариев: 1
Здравствуйте. Очень интересное решение.
Скажите пожалуйста, как его отредактировать, чтобы было так:
1) При первом заходе на сайт через 4 секунды появляется окошечко в нижней части сайта (как бы прилипшее, и не меняющее своего положения при прокрутке), к примеру, 300px на 300px со своим "полным дизайном".
2) Если пользователь нажмёт на крестик "закрытия" в данном блоке (или ссылку, которая будет открыта в новом окне), то окошечко моментально уменьшится в размере (изменится дизайн (через добавление подстиля блоку), станет "компактным", не мешающим чтению контента) и станет, к примеру, 300px на 40px, но так и останется прикреплённым к краю при прокрутке. И на всех последующих открываемых страницах сайта будет отображаться сразу без 4-х секундной задержки, и в компактном режиме.
А если посетитель проигнорирует и ничего не нажмёт в том окошечке, то при переходе на другую страницу опять отобразится через 4 секунды данное окошечко в "полном дизайне".
"Полный" и "компактный" блоки я уже сделал https://jsfiddle.net/t6rqty8d/1/ , но т.к. с JS я очень плохо знаком, то блок с полного на компактный в примере переключается в зависимости от разрешения экрана - если меньше 768px, то показывается компактный. Это для примера, в js, как я понимаю, с помощью js добавляется подстиль и блок меняет свой дизайн.
Поммогите пожалуйста реализовать задуманное.
Комментариев: 513
Сделать то что вы хотите можно, если я правильно понял 🙂 Вам понадобятся куки 100%. И правильно написанные стили.
Комментариев: 2
У вас даже на примере при каждом обновлении страницы, появляется окно. В итоге скрипт написан на "Раз в сутки" или на каждое обновление страницы?
Комментариев: 2
Прошу прощения, все работает.
Комментариев: 4
Здравствуйте Виталий. Можно ли сделать так чтобы всплывающее окно открывалось только при посещении одной определенной рубрики?
Комментариев: 513
Смотря какой у вас движок, если вордпресс. то можно с помощью функции is_category();
Комментариев: 4
Движок вордпресс. Насколько я понял, нужно в папку archive.php вставить:
Правильно?
Комментариев: 4
Код не вставился в комментарий.
Комментариев: 513
Нет, ну или я не что-то не понимаю. Причем тут archive.php. Есть функция специальная is_category(); используя ее нужно с помощью РНР кода написать условие, в которое обернуть код формы. Все это добавить файл, например подвал.
Комментариев: 4
Спасибо, все получилось.
Комментариев: 1
А как проделать всё это только с div блоком в шапке, сделала как вы, но ничего не получается
Комментариев: 513
Окно в статье и есть див блок. Или во всем коде из статьи замените айди дива на свой, или своему пропишите айди - bg_popup и не добавляйте HTML код окна с статьи. Так же подправьте стили ибо окно фиксированное, а див ваш в шапке нет. Делов то 🙂
Комментариев: 2
Виталий, а почему куки могут не работать?
Все подключил по вашей инструкции. Pop-up открывается при каждой загрузке страницы. Id не менял ни у кнопки закрытия окна ни в скрипте.
Комментариев: 513
На вскидку, причин может быть несколько.
1. Вы проверяете работу окна на локалке, то бишь на странице что лежит на вашем компьютере, а не на хостинге.
2. Где-то допустили ошибку, что более вероятно. Способ рабочий миллион процентов даю, потому как использую его постоянно.
Комментариев: 2
Ссылку на сайт если дам, будет возможность проверить на ошибку?)
Комментариев: 513
В скайп киньте
Комментариев: 1
Здравствуйте, возможен ли вывод окна не более 2х раз за сутки (при любом интервале между этими появлениями)
Комментариев: 5
Здравствуйте, добавил все к страничке как описано. вставил скрипт в хедер вместе с подключением всех указаних. сам див в тело закинул. т. к. css у меня отдельным файлом, туда и стили добавил только сделал каждый отдельным классом и соответственно подключил эти классы к нужным дивам. НО окно не появляется вообще. тестирую на локалке, как понял должно при каждой перезагрузке показываться, но его нету вообще. время задержки сделал пол секунды, хранения куков до конца сессии, как в комментариях было. подскажите в чем может быть еще проблема. работаю с asp.net web form.
Комментариев: 513
Я в конце статьи, даже цитатой выделил, как предвидел подобный комментарий, но вы не прочитали.... Повторю персонально и вам:
Есть еще один момент. Куки будут работать, если Вы загрузите все это на хостинг. На локальном хранилище работать может только в Мозиле(Месяц назад мозила стала хромом, поэтому в ней тоже не работает.) в то время как Хром и Опера будут постоянно показывать окно. Когда-то я уже с этим сталкивался и потратил не мало времени, так что, чтобы проверить нужно делать это прям на сайте а не запускать с рабочего стола.
Комментариев: 5
Виталий, я прочитали этот абзац, но видимо мы друг друга не понимаем. насколько я понял с того что написано и с того что Вы ответили, то на локалке при каждой перезагрузке страницы должно всплывать это самое окно, а сами куки не будут работать. Но у меня оно вообще не всплывает, ни при первой, ни при последующих перезагрузках.
Комментариев: 513
Мне нужен адрес сайта, чтобы увидеть как вы добавили код. Можете связаться со мной через скайп для более удобного общения. Скайп указан в шапке сайта.
Комментариев: 5
Сайт, точнее страница, пока не развернута на сервере. скайп увы на работе запрещен. вот код:
<head runat="server">
<title>Admin Panel</title>
<link rel="stylesheet" href="~/css/Styles.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="~/scripts/jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#setCookie").click(function () {
$.cookie("popup", "", { expires: 0 });
$("#bg_popup").hide();
});
if ($.cookie("popup") == null) {
setTimeout(function () {
$("#bg_popup").show();
}, 500)
}
else {
$("#bg_popup").hide();
}
});
</script>-->
</head>
<body>
<!-- <div id="bg_popup" class="bg_popup">
<div id="popup" class="popup">
<a id="setCookie" class="close" href="#" title="Закрыть" onclick="document.getElementById('bg_popup').style.display='none'; return false;">X</a>
<h1>Авторизація</h1>
<p>тут буде авторизація</p>
</div>
</div>
...
</body>
css просто скопировал заменив #bg_popup и #popup на .bg_popup и .popup соответственно.
Комментариев: 5
я тут начало комментария забыл затереть, просто копиров код с проекта, а этот кусок пока закомментирован, так что просто не обращайте внимания на этот момент:
<body>
<!-- <div id="bg_popup"
Комментариев: 513
Что за сочетание символов в ссылках?
~/
Я смогу помочь, только тогда когда сайт будет находится на реальном хостинге и я смогу в живую все увидеть, а так это испорченный телефон.
Комментариев: 5
В таком случае извините за беспокойство и спасибо. Сайт будет работать на локальном сервере организации(даже не уверен что в развернутом виде будут работать куки). В любом случае спасибо за помощь, ну или точнее за попытку. Всего хорошего.
Комментариев: 5
Виталий, добрый день.
Спасибо за толковый пример!
У меня вопрос. Баннер что в попапе появляется до загрузки страницы. (на каких то доли секунды). Мне нужно исправить этот момент.. НО я пока не нашел решения. (пробовал с $(document).ready and window.onload() )
Картинка сама по ссылке добавлена в Html тело. Думаю еще попробовать закинуть ее в css как bg поставить?
Что порекомендуете??
Комментариев: 5
предварительное ковыряние показало, что картинка достаточно быстро загружается.. Если своими словами то не успевает попаcnm под действие скрипта. Сами страницы не имеют ,особой нагрузки другими блоками.. Ну и так получается что баннер (сама картинка мелькает до загрузки остального содержимого)
Комментариев: 513
Скорее всего, у вас стили и скрипты подключаются в подвале сайта. Значит сначала появляется код вы ведите картинку или после полной загрузки срабатывают стили и скрипт и окно прячется. Подключите в шапку перед закрывающимся /head.
Комментариев: 5
В данный момент скрипт подлечен в header. А сам div и блок с баннером - в foteer.
Не пойму что ему сделать... Если ставить display:none на тег img - то ничего не меняетсяю Разве что потом не отображается баннер.
(делаю пока все на локалке. + контент подгружается в процессе скрола. ХЗ - последнее по идеи не должно влиять на это..)
Комментариев: 513
Скрипт хорошо, а Стили CSS где, в подвале?
Комментариев: 5
Стили отдельно в css файле. Могло повлиять?
Комментариев: 513
То что отдельно нет, главное они должны подключаться выше чем код окна, то бишь в шапке.
Комментариев: 5
Разобрался. Самое обидное - мелочь какая-то. цеплял на OpenCart. Оно как то в кеше виснет. Бррееед ....
Автору спасибо!.
Комментариев: 3
Добрый день, Виталий.
У меня по этому коду "
var delay_popup = 50000;
setTimeout("document.getElementById('bg_popupe').style.display='block'", delay_popup);
" модальное окно через 5 секунд появляется.
Теперь я хочу подключить cookie, чтобы одному пользователю модальное окно заново не показывался. Но не получается это сделать. Как можно подключить cookie используя этот код: "var delay_popup = 50000;
setTimeout("document.getElementById('bg_popupe').style.display='block'", delay_popup);"
Комментариев: 3
Там ошибка через 50 секунд появляется
Комментариев: 513
Вы читали мою статью? Сделайте так же и будет вам счастье. Ваш код это чистая ява для вывода с задержкой. Он не подойдет для куков. Нужно писать новую функцию и тд. Зачем изобретать велосипед, воспользуйтесь материалом из статьи и не усложняйте себе жизнь 🙂
Комментариев: 3
Проблема в этом этот скрипт у меня не работает.
$(document).ready(function(){
$("#setCookie").click(function () {
$.cookie("popup", "24house", {expires: 0} );
$("#bg_popup").hide();
});
if ( $.cookie("popup") == null )
{
setTimeout(function(){
$("#bg_popup").show();
}, 4000)
}
else { $("#bg_popup").hide();
}
});
То есть после добавления этого скрипта модальное окно не появляется.
Комментариев: 2
Попробывал впервые, но не получилось. Что не так никак не пойму. Не подскажите как все это подключить - где и куда вставлять коды? Спасибо.
Комментариев: 513
Здравствуйте. Скрипты вставлять куда написано в статье - в шапке сайта. Код HTML, можно в подвале сайта разместить. Стили в файл стилей CSS, вашего сайта.
Комментариев: 1
сайт на joomla 3, код окна поставил в боди, скрипты подключил , ничего не происходит. Но ровно через указанное время задержки в консоле ругается на эту строчку $("#bg_popup").show();