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

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

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

  1. Спасибо. Хороший скрипт.

  2. А как установить expires в часах?

    • Никак, можно только в днях.

      • Dimox большое спасибо, может Ты знаешь как реализовать:

        — чтобы запоминания в куках проходили только тогда когда пользователь закроет окно? (То есть не сразу, не тогда когда просто обновит страницу или закроет и откроет сайт вновь, а именно когда нажмет закрыть)
        — для того чтобы закрыть окно нужно было кликнуть по тексту объявления (ссылке)?

        Могу заплатить за роботу.
        Жду ответа.

    • Высчитать.
      1 час — это 0.042 дня (1 день /24 часа);
      1 мин — это 0.0007 дня (0.042 час /60 сек)

  3. Никак, можно только в днях.

    Жесть, от вас не ожидал: http://stackoverflow.com/questions/14939994/jquery-cookies-set-expire-time

  4. arcticModal работает нормально, но в Internet Explorer при вызове модального окна происходит двойное затемнение. т.е. На миллисекунду экран затемняется, светлеет, а потом затеняется в обычном режиме. Не критично, но это мерцания раздрожает :(
    На Firefox и Chrome все работает отлично.
    Делаю вот так:
    $.arcticmodal({
    type: ‘ajax’,
    url: ‘mod_win.php’
    });
    Это так и должно быть, или я что-то не так сделал?

  5. что-то нифига не работает, можно рабочий пример демо

  6. Большое спасибо за статью, очень помогли. Вот только может кто то знает, как реализовать:

    — чтобы запоминания в куках проходили только тогда когда пользователь закроет окно? (То есть не сразу, не тогда когда просто обновит страницу или закроет и откроет сайт вновь, а именно когда нажмет закрыть)
    — для того чтобы закрыть окно нужно было кликнуть по тексту объявления (ссылке)?

    Помогите пожалуйста!

  7. Павел Страный
    5 лет 6 месяцев назад

    Добрый день! Я как и те кто оставлял комментарии в начале статьи ни как не могу добиться положительного эфекта предложеного примера. Я не силень в скриптах, поэтому делаю все по представленым примерам и изучая комментарии. Может кто то подскажет что в моем коде не так:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/html">
    <html>
    <head>
    
    <!-- jQuery -->
    <script src="//yandex.st/jquery/1.9.1/jquery.min.js"></script>
    
    <!-- arcticModal -->
    <script src="js/arcticmodal/jquery.arcticmodal-0.3.min.js"></script>
    <link rel="stylesheet" href="js/arcticmodal/jquery.arcticmodal-0.3.css">
    
    <!-- arcticModal theme -->
    <link rel="stylesheet" href="js/arcticmodal/themes/simple.css">
    
    </head>
    <body>
    
    <div style="display: none;">
        <div class="box-modal" id="exampleModal">
            <div class="box-modal_close arcticmodal-close">закрыть</div>
            Пример модального окна
        </div>
    </div>
    
    <div style="display: none;">
     <div class="box-modal" id="boxUserFirstInfo">
     <div class="box-modal_close arcticmodal-close">закрыть</div>
     <b>Здравствуй, милый человек!</b><br>
     <br>
     Надеюсь тебе понравится на нашем сайте!
     У нас много интересной информации и очень отзывчивое комьюнити.
     Добро пожаловать :)
     </div>
    </div>
    
    <script>
    if (!$.cookie('wasVisit')) {
    
     $('#boxUserFirstInfo').arcticmodal({
     closeOnOverlayClick: false,
     closeOnEsc: true
     });
    
    }
    
    $.cookie('wasVisit', true, {
     expires: 1,
     path: '/'
    });
    </script>
    
    <script type="text/javascript">
    	$(function(){
        $('#exampleModal').arcticmodal();
    });
    </script>
    </body>
    </html>

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

    • У вас неправильное содержимое тега <script>, в котором код cookie (отсутствует часть кода). Сделайте, как в статье.

      • Есть, поменял и все равно ни чего не отображается.

        <!DOCTYPE html>
        <html xmlns="http://www.w3.org/1999/html">
        <html>
        <head>
        
        <!-- jQuery -->
        <script src="//yandex.st/jquery/1.9.1/jquery.min.js"></script>
        
        <!-- arcticModal -->
        <script src="js/arcticmodal/jquery.arcticmodal-0.3.min.js"></script>
        <link rel="stylesheet" href="js/arcticmodal/jquery.arcticmodal-0.3.css">
        
        <!-- arcticModal theme -->
        <link rel="stylesheet" href="js/arcticmodal/themes/simple.css">
        
        </head>
        <body>
        
        <div style="display: none;">
            <div class="box-modal" id="exampleModal">
                <div class="box-modal_close arcticmodal-close">закрыть</div>
                Пример модального окна
            </div>
        </div>
        
        <div style="display: none;">
         <div class="box-modal" id="boxUserFirstInfo">
         <div class="box-modal_close arcticmodal-close">закрыть</div>
         <b>Здравствуй, милый человек!</b><br>
         <br>
         Надеюсь тебе понравится на нашем сайте!
         У нас много интересной информации и очень отзывчивое комьюнити.
         Добро пожаловать :)
         </div>
        </div>
        
        <script>  
        (function($) {  
        $(function() {  
          
          // Проверим, есть ли запись в куках о посещении посетителя  
          // Если запись есть - ничего не делаем  
          if (!$.cookie('was')) {  
          
            // Покажем всплывающее окно  
            $('#boxUserFirstInfo').arcticmodal({  
              closeOnOverlayClick: false,  
              closeOnEsc: true  
            });  
          
          }  
          
          // Запомним в куках, что посетитель к нам уже заходил  
          $.cookie('was', true, {  
            expires: 1,  
            path: '/'  
          });  
          
        })  
        })(jQuery)  
        </script>
        
        </body>
        </html>

        P.S. Заемтил следующее: когда в коде присутствую два скрипта с куками и с сайта модального окна, то на странице не отображается ни одно из окон, а как тольк о удаляю скрипт с куками, то модальное окно начинает работать. Может это поможет в решении моего вопроса?

  8. Все отлично работает! Я использую плагин Simplemodal для всплывающих окошек, но это не столь важно насколько работоспособность куков. Спасибо за пост!

  9. Cпасибо вам и Арктиклабу за простой в установке и грамотно работающий скрипт!

  10. Нифика не работает , всё перепробовал, и скачал и перекачал и так и сяк …
    Нет никакого окна и НОЛЬ полный …. печалька

  11. Да все работает — проверьте пути к скриптам, правильность кода. В папке с файлами проверьте названия файлов — может они не такие, как в статье, а например jquery.arcticmodal-0.3.min.js ???
    По поводу времени кук в минутах, часах, секундах: можно и это сделать. Чтобы не сильно заморачиваться — Скачайте себе скрипт yjquery.cookie.min.js в каталог (вместо подключения из //yandex.st/jquery/cookie/1.0/jquery.cookie.min.js), откройте в редакторе и измените m.expires*24*60*60*1000 на что вам угодно. Себе установил m.expires*30*1000 и в скрипте expires: 2, Почему не *60*1000? А мне так удобно :)
    Да и не забудьте прописать правильный путь к ВАШЕМУ измененному файлу yjquery.cookie.min.js !

    • А как высчитывается m.expires? (например, что такое 1000 в формуле)
      И как по этой формуле выставить куку на 1 час?
      И в самом скрипте, там где expires, какое значение ставить?

      • 1000 — это миллисекунды (в одной секунде их 1000), *60 — получим минут, еще *60 — получим час, еще *24 — получим сутки, еще на что-нибудь умножим — получим количество дней.

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

  12. Всем привет!
    А как сделать открытие простого окна по ссылки? Если не нужно, чтобы окно автоматически открывалось при открытии сайта. Нужно просто при нажатии на ссылку. У них на сайте не могу разобраться.
    Спасибо!

  13. Не работал в ффоксе скролл после закрытия рекламы. Посенял в скрипте параметр «overflow» с hidden на scroll и всё заработало!

  14. Добрый день, подскажите, пожалуйста, как сделать так чтобы окно загружалось не сразу при заходе на сайт а с некоторой задержкой. Заранее спасибо!

  15. Если cookies отключены, будет печаль, окно будет появляться при каждой загрузке страницы.

  16. А возможно это окно присобачить к joomla 2.5?

  17. Здравствуйте! Подскажите, а как сделать что бы скрипт выполнялся только в определенное время, например с 10:00 до 20:00 ? Спасибо.

    • Вот так:

      
      (function($) {
      $(function() {
      
      	var currentTime = new Date().getHours();
      
      	if (currentTime >= 10 && currentTime < 20) {
      
      		// Проверим, есть ли запись в куках о посещении посетителя
      		// Если запись есть - ничего не делаем
      		if (!$.cookie('was')) {
      
      			// Покажем всплывающее окно
      			$('#boxUserFirstInfo').arcticmodal({
      				closeOnOverlayClick: false,
      				closeOnEsc: true
      			});
      
      		}
      
      		// Запомним в куках, что посетитель к нам уже заходил
      		$.cookie('was', true, {
      			expires: 365,
      			path: '/'
      		});
      
      	}
      
      })
      })(jQuery)
      
  18. Спасибо!

    Я так сделал уже:

    <script>
    	var executed = false;
    	setInterval(function() {
    		var d = new Date();
    		var n = d.getHours();
    
    		if (n>10&amp;&amp;n<20&amp;&amp;!executed) {
    			executed=true;
    
    			(function($) {
    				$(function() {
    					if (!$.cookie('was')) {
    						$('#boxUserFirstInfo').arcticmodal({
    							closeOnOverlayClick: true,
    							closeOnEsc: true
    						});
    
    						$.cookie('was', true, {
    							expires: 20,
    							path: '/'
    						});
    					}
    				})
    			})(jQuery)
    		}
    	});
    </script>

    Какой вариант корректнее Ваш или мой, или всё равно?

  19. сделал всё как в гайде. но окно не появляется вообще. сайт на yii может в этом проблема такое ощущение что куки с яндекса не крепится.

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

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