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

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

* * *

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

Для реализации такого функционала мы будем использовать 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 дней, т. е. в течение года после посещения сайта мы не будем показывать окно. При каждом посещении кука обновляется.

Ссылки

Полезные комментарии (1)
Комментарии (113)
  1. 1
    Велимудр

    Добрый день.
    Куки не работают в Опере, при обновлении окно так и появляется, сделал всё, естественно, как в статье.
    Подключал и скачанные файлы, и с яндекса — не работает.

  2. 2
    Станислав

    Установил на MODx решение, все работает. Только у меня 2 модальных окна. И возникла задача показывать их последовательно. setTimeout не подходит для этой задачи, т.к. если пользователь не закроет первое окно, появится второе поверх. Нужно прописать JS условие, которое проверяет: открыто ли уже модальное окно arcticmodal. Можете помочь?

  3. 3
    Flax

    Здравствуйте не работает на браузере гугол хром, как можно решить данную проблему?

  4. 4
    Виктор

    Здравствуйте. Подскажите пожалуйста люди добрый.
    Есть такая задача, нужно чтобы страница обновлялась один раз за сессию, применяю ваш скрипт, но вместо модального окна вставляю свой скрипт обновления страницы и ничего не работает.
    Выглядит это так:

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

    Подскажите пожалуйста что неправильного в моём коде?

  5. 5
    Антон

    Привет! никак не хочет работать, в консоль бьет ошибку b.wrap is undefined!! Помогите пожалукйста

  6. 10
    Александр

    Добрый день!
    Подскажите пожалуйста, как поставить задержку для всплытия окна, мне надо чтоб оно появлялось через 5 секунд?

  7. 12

    Добрый день!
    Требовалось создать всплывающее окно для раздела для специалистов с вопросом и ответами — «Да» и «Нет». Хотелось, чтобы после нажатия «Да» (т.е. подтверждения, что я — специалист) окно закрывалось , в куках сохранялась информация и окно в течение указанного срока больше не отображалось. При клике на «Нет» осуществлялся бы переход на главную страницу, а при повторной попытке вновь бы всплывало окно.

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

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

    не знаю.

    Подскажите, пожалуйста.

  8. 13
    Sergey

    Сделал по Вашему совету coockie с временем жизни 2 минуты, НО если посетитель в течение этих 2х минут снова перезагрузит страницу, то создаётся новый coockie и тоже на 2 минуты и так до бесконечности. Выходит если сделать coockie на 1 сутки, то запрет показа будет продляться постоянно. Как сделать, чтобы не создавался новый coockie, а просто проверялось наличие и валидность первого?

    присоединюсь к вопросу прошу подсказать с примером как сделать чтобы оно каждый раз куку не обновляло?

  9. 14
    Sergey

    Всем привет, может кто подскажет как сделать чтобы показывать модальное окно только в первые 5 посещений страницы? поидее нужно как-то счетчик запилить и потом проверять если показов в куке записано меньше 5ти показывать если больше не показывать, я просто ен знаю как это на яваскрипте изобразить( прошу помощи. Спасибо

  10. 15
    Alex

    Люди добрые, а данный скрипт можно сделать таким образом что бы модал выскакивал при ВТОРОМ заходе, проверив наличие куки и выдавал модальное окно, желательно со своими дивами и прочими потрахами (а не из вне). Спасибо.

  11. 16
    Александр

    Здравствуйте.
    Как сделать так, чтобы при проявлении окна не срабатывал скролл к верху страницы?

  12. 17
    Дмитрий

    Спасибо! Хороший модуль.
    Скажите пожалуйста, а как этот вывод сделать 1) при 2-ом посещении; 2) после, скажем, 5 минут на сайте нахождения на сайте?

  1. 1

    Вот эту част кода:

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

    заворачиваем вот так:

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

    10000 — это 10 секунд, время, через которое всплывет окно.