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

Ссылки

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

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

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

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

  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. Привет! никак не хочет работать, в консоль бьет ошибку b.wrap is undefined!! Помогите пожалукйста

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

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

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

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

    не знаю.

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

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

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

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

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

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

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

  13. Люди добрый, помогите подключить этот модуль… На лэндинге — нифига не работает. Бьюсь уже пол дня.. (( Вот адрес тестового лендинга: http://evakuator.h1n.ru/
    Что я могу не так делать?

  14. Здравствуйте, попросил фрилансера изменить местоположение баннеров адсенсе, заплатил конечно, затем начал замечать всплывающее окно с рекламой при открытии сайта, появляется оно только при первом запуске сайта. Количество посетителей резко сократилось, видимо это отпугивает их. Сайт на DLE. Подскажите пожалуйста, где и что искать чтобы удалить его.

  15. Скажите, а как вызывать выполнение скрипта по нажатию на ссылку? Пытаюсь реализовать выбор города. Окно всплывает, все хорошо. Но надо, чтобы можно было сменить город и позднее нажатием на ссылку с его названием.

  16. Вот так

    
    
    <script> 
    $(document).ready(function(){
    $(".modal").click(function(){
    $('#boxUserFirstInfo').arcticmodal({ 
     closeOnOverlayClick: true, 
     closeOnEsc: true 
     });
     return false;
    });
    })
    </script> 
    
    <a href="#" class="modal" >открыть окно</a>
  17. Вот хороший пример
    Работает на JQuery, и другие плагины не нужны.
    А вот тут я немножко доработал это решение.

  18. А как сделать, чтобы всплывающее окно появлялось с небольшой задержкой, то есть не сразу после открытия страницы сайта, а секунд через 15?

  19. Норм, только при заходе на страницу, если ничего не нажимать и просто нажать F5, окно больше не появляется ;)

  20. Скрипт у меня почему то работает только в яндекс браузере и больше нигде?

Ваш комментарий