Всплывающее окно при первом посещении сайта на jQuery

125 комментариев

Представляю вашему вниманию гостевой пост от Сергея Предводителева, одного из разработчиков Арктической Лаборатории.

* * *

На некоторых сайтах необходимо при первом посещении показывать посетителю информацию во всплывающем окне. Это может потребоваться, например, для сайтов некоторых тематик, чтобы узнать возраст посетителя. Ещё один вариант использования данного функционала — рассказать кратко о цели сайта.

Для реализации такого функционала мы будем использовать jQuery и несколько плагинов к нему.

Чтобы показывать всплывающие окна воспользуемся плагином arcticModal. Этот плагин, в отличие от многих других, позволяет очень просто кастомизировать внешний вид модальных окон.

Для того, чтобы показать окно лишь один раз, будем запоминать в куках, что посетитель заходил на сайт. Работу с куками нам обеспечит небольшой плагин с простым именем cookie.

Подключаем необходимые файлы

Если на вашем сайте не подключен jQuery, то подключим его. Используем CDN Яндекса. Вставляем этот код внутри тега <head></head>:

<!-- jQuery -->
<script src="//yandex.st/jquery/1.9.1/jquery.min.js"></script>

Теперь займёмся плагином для всплывающих окон. Скачиваем arcticModal c официального сайта и подключаем его:

<!-- arcticModal -->
<script src="arcticmodal/jquery.arcticmodal.js"></script>
<link rel="stylesheet" href="arcticmodal/jquery.arcticmodal.css">

Не будем придумывать стиль оформления окна и подключим одну из стандартных тем arcticModal. Как будут выглядеть окна, можно посмотреть на сайте плагина.

<!-- arcticModal theme -->
<link rel="stylesheet" href="arcticmodal/themes/simple.css">

Если вам не подходит такое оформление, то его можно легко исправить, обладая даже небольшими знаниями CSS. В качестве основы можно взять файл стилей стандартной темы.

Подключаем плагин cookie (тоже с Яндекса):

<!-- cookie -->
<script src="//yandex.st/jquery/cookie/1.0/jquery.cookie.min.js"></script>

HTML

Всё, что было нужно, подключено, теперь напишем код всплывающего окна с информацией для пользователя:

<div style="display: none;">
	<div class="box-modal" id="boxUserFirstInfo">
		<div class="box-modal_close arcticmodal-close">закрыть</div>
		<b>Здравствуй, милый человек!</b><br>
		<br>
		Надеюсь тебе понравится на нашем сайте!
		У нас много интересной информации и очень отзывчивое комьюнити.
		Добро пожаловать :)
	</div>
</div>

В коде используется класс arcticmodal-close. При клике на элемент с таким классом окно будет закрываться.

Код JS

И, наконец, напишем скрипт, который и реализует всю логику:

<script>
(function($) {
$(function() {

	// Проверим, есть ли запись в куках о посещении посетителя
	// Если запись есть - ничего не делаем
	if (!$.cookie('was')) {

		// Покажем всплывающее окно
		$('#boxUserFirstInfo').arcticmodal({
			closeOnOverlayClick: false,
			closeOnEsc: true
		});

	}

	// Запомним в куках, что посетитель к нам уже заходил
	$.cookie('was', true, {
		expires: 365,
		path: '/'
	});

})
})(jQuery)
</script>

Параметр closeOnOverlayClick при вызове arcticModal определяет, будет ли закрываться окно при клике на оверлее (слою, перекрывающему весь контент, т. е. при клике вне окна), а параметр closeOnEsc — при нажатие кнопки Esc.

Параметр expires при сохранении записи в куках задаёт время хранения куки в днях. В нашем случае 365 дней, т. е. в течение года после посещения сайта мы не будем показывать окно. При каждом посещении кука обновляется.

Ссылки

Скрипт-дополнение к jQuery-плагину bxSlider

60 комментариев

Когда при верстке сайтов на заказ есть необходимость реализовать слайдер, я использую замечательный jQuery-плагин bxSlider. Он очень прост в установке, настройке и стилизации и поддерживает последние тенденции в веб-разработке, такие, ...

jQuery Form Styler - плагин для стилизации элементов HTML-форм (input[type=checkbox], input[type=radio], input[type=file], input[type=number], select)

2614 комментариев

Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; ...

jQuery-плагин для стилизации input[type="radio"]

38 комментариев

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Завершаю серию статей по стилизации элементов html-форм с помощью ...

jQuery-плагин для стилизации input[type="checkbox"]

35 комментариев

Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Как и обещал ранее, делюсь своим очередным jQuery-скриптом в ...

Комментарии (125)

Велимудр
6 мая 2015 г. в 14:09
Добрый день.
Куки не работают в Опере, при обновлении окно так и появляется, сделал всё, естественно, как в статье.
Подключал и скачанные файлы, и с яндекса — не работает.
Станислав
8 июня 2015 г. в 14:47
Установил на MODx решение, все работает. Только у меня 2 модальных окна. И возникла задача показывать их последовательно. setTimeout не подходит для этой задачи, т.к. если пользователь не закроет первое окно, появится второе поверх. Нужно прописать JS условие, которое проверяет: открыто ли уже модальное окно arcticmodal. Можете помочь?
Flax
7 августа 2015 г. в 23:11
Здравствуйте не работает на браузере гугол хром, как можно решить данную проблему?
Виктор
28 августа 2015 г. в 00:13
Здравствуйте. Подскажите пожалуйста люди добрый.
Есть такая задача, нужно чтобы страница обновлялась один раз за сессию, применяю ваш скрипт, но вместо модального окна вставляю свой скрипт обновления страницы и ничего не работает.
Выглядит это так:
```
(function($) {
$(function() {
  if (!$.cookie('was')) {
	  
function apnut_tolko_1_raz() {
    if (!window.location.hash) {
        window.location = window.location + '#uge_obnovleno';
        window.location.reload();
    }
}
setTimeout("apnut_tolko_1_raz()", 0);


  }
 $.cookie('was', true, {
    expires: 365,
    path: '/'
  });

})
})(jQuery)
```
Подскажите пожалуйста что неправильного в моём коде?
Антон
3 сентября 2015 г. в 19:49
Привет! никак не хочет работать, в консоль бьет ошибку b.wrap is undefined!! Помогите пожалукйста
1. Dimox
  3 сентября 2015 г. в 20:04 / ответ на коммент Антон
  К данному скрипту эта ошибка не имеет никакого отношения. Проблема в других ваших скриптах.
  1. Антон
    3 сентября 2015 г. в 21:37 / ответ на коммент Dimox
    ругается именно н анего! Строка 192 (19 если мин версия)
    
    Dimox
    3 сентября 2015 г. в 22:39 / ответ на коммент Антон
    Точно. Я был не прав. В общем, я не знаю, в чем причина, не я автор плагина.
    
    Chamie
    6 декабря 2016 г. в 15:45 / ответ на коммент Антон
    Проверьте, что вызов arcticmodal происходит после document.ready, потому что там (почему-то) default_options.wrap инициализируется через $(function() { default_options.wrap = $((document.all && !document.querySelector) ? ‘html’ : ‘body’); }); ( https://github.com/vjik/arcticModal/blob/master/arcticmodal/jquery.arcticmodal.js#L402 )
    Так что если создаёте окно прямо в коде, а не в функции, повешенной на ‘ready’, то на 310й строке падает.
Александр
11 сентября 2015 г. в 18:27
Добрый день!
Подскажите пожалуйста, как поставить задержку для всплытия окна, мне надо чтоб оно появлялось через 5 секунд?
1. Dimox
  11 сентября 2015 г. в 18:42 / ответ на коммент Александр
  Решение здесь.
Николай
6 октября 2015 г. в 13:00
Добрый день!
Требовалось создать всплывающее окно для раздела для специалистов с вопросом и ответами — «Да» и «Нет». Хотелось, чтобы после нажатия «Да» (т.е. подтверждения, что я — специалист) окно закрывалось , в куках сохранялась информация и окно в течение указанного срока больше не отображалось. При клике на «Нет» осуществлялся бы переход на главную страницу, а при повторной попытке вновь бы всплывало окно.

Кнопки сделал, переход и закрытие окна происходит, но вот что прописать в

$.cookie(‘was’, true, {
expires: 365,
path: ‘/’
});

не знаю.

Подскажите, пожалуйста.
1. Антон
  16 октября 2019 г. в 21:34 / ответ на коммент Николай
  $('#yes').click(function() { $.cookie('was', true, { expires: 1, path: '/' }); });
  
  Этот код не работает: не сохраняет куки при клике на кнопку с id yes. Dimox, подскажите, пожалуйста, в чем проблема, вопрос неоднократно задавался в этой теме, но так и остался без ответа. Заранее спасибо.
Sergey
4 ноября 2015 г. в 23:42
Сделал по Вашему совету coockie с временем жизни 2 минуты, НО если посетитель в течение этих 2х минут снова перезагрузит страницу, то создаётся новый coockie и тоже на 2 минуты и так до бесконечности. Выходит если сделать coockie на 1 сутки, то запрет показа будет продляться постоянно. Как сделать, чтобы не создавался новый coockie, а просто проверялось наличие и валидность первого?

присоединюсь к вопросу прошу подсказать с примером как сделать чтобы оно каждый раз куку не обновляло?
Sergey
4 ноября 2015 г. в 23:50
Всем привет, может кто подскажет как сделать чтобы показывать модальное окно только в первые 5 посещений страницы? поидее нужно как-то счетчик запилить и потом проверять если показов в куке записано меньше 5ти показывать если больше не показывать, я просто ен знаю как это на яваскрипте изобразить( прошу помощи. Спасибо
Alex
17 декабря 2015 г. в 06:26
Люди добрые, а данный скрипт можно сделать таким образом что бы модал выскакивал при ВТОРОМ заходе, проверив наличие куки и выдавал модальное окно, желательно со своими дивами и прочими потрахами (а не из вне). Спасибо.
Александр
16 марта 2016 г. в 12:26
Здравствуйте.
Как сделать так, чтобы при проявлении окна не срабатывал скролл к верху страницы?
Дмитрий
15 апреля 2016 г. в 22:38
Спасибо! Хороший модуль.
Скажите пожалуйста, а как этот вывод сделать 1) при 2-ом посещении; 2) после, скажем, 5 минут на сайте нахождения на сайте?
Юрий
23 декабря 2016 г. в 13:24
Люди добрый, помогите подключить этот модуль… На лэндинге — нифига не работает. Бьюсь уже пол дня.. (( Вот адрес тестового лендинга: http://evakuator.h1n.ru/
Что я могу не так делать?
Oleg
5 февраля 2017 г. в 16:19
Здравствуйте, попросил фрилансера изменить местоположение баннеров адсенсе, заплатил конечно, затем начал замечать всплывающее окно с рекламой при открытии сайта, появляется оно только при первом запуске сайта. Количество посетителей резко сократилось, видимо это отпугивает их. Сайт на DLE. Подскажите пожалуйста, где и что искать чтобы удалить его.
1. Дмитрий
  13 октября 2017 г. в 23:17 / ответ на коммент Oleg
  Пиши на почту, помогу dor-style@mail.ru
Igor
8 июня 2017 г. в 15:13
Скажите, а как вызывать выполнение скрипта по нажатию на ссылку? Пытаюсь реализовать выбор города. Окно всплывает, все хорошо. Но надо, чтобы можно было сменить город и позднее нажатием на ссылку с его названием.

Igor

9 июня 2017 г. в 12:11

Вот так


<script> 
$(document).ready(function(){
$(".modal").click(function(){
$('#boxUserFirstInfo').arcticmodal({ 
 closeOnOverlayClick: true, 
 closeOnEsc: true 
 });
 return false;
});
})
</script> 

<a href="#" class="modal" >открыть окно</a>

Вячеслав
4 сентября 2017 г. в 15:02
Вот хороший пример
Работает на JQuery, и другие плагины не нужны.
А вот тут я немножко доработал это решение.
hunter0k
16 сентября 2017 г. в 19:37
А как сделать, чтобы всплывающее окно появлялось с небольшой задержкой, то есть не сразу после открытия страницы сайта, а секунд через 15?
1. Dimox
  16 сентября 2017 г. в 22:11 / ответ на коммент hunter0k
  Ответ здесь.
Коля
26 октября 2018 г. в 11:15
Норм, только при заходе на страницу, если ничего не нажимать и просто нажать F5, окно больше не появляется ;)
Сергей
9 января 2019 г. в 11:33
Скрипт у меня почему то работает только в яндекс браузере и больше нигде?