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

Ссылки

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

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

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

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

  4. Виктор
    5 лет назад

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

    
    (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!! Помогите пожалукйста

    • К данному скрипту эта ошибка не имеет никакого отношения. Проблема в других ваших скриптах.

      • ругается именно н анего! Строка 192 (19 если мин версия)

        • Точно. Я был не прав. В общем, я не знаю, в чем причина, не я автор плагина.

        • Проверьте, что вызов 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й строке падает.

  6. Александр
    5 лет назад

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

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

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

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

    не знаю.

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

    • 
      	$('#yes').click(function() {
      		$.cookie('was', true, {
      			expires: 1,
      			path: '/'
      		});
      	});
      

      Этот код не работает: не сохраняет куки при клике на кнопку с id yes. Dimox, подскажите, пожалуйста, в чем проблема, вопрос неоднократно задавался в этой теме, но так и остался без ответа. Заранее спасибо.

  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. Вячеслав
    3 года назад

    Вот хороший пример
    Работает на JQuery, и другие плагины не нужны.
    А вот тут я немножко доработал это решение.

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

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

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

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