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

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

Полезные комментарии (1)
Комментарии (121)
  1. 2
    expires
    @

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

  2. 5
    Андрей

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

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

  3. 6
    Андрей

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

  4. 7
    Серж
    @

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

  5. 8
    @

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

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

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

  6. 9
    Павел Страный
    @

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

    <!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>

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

    • 10

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

      • 11
        Павел Страный
        @

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

        <!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. Заемтил следующее: когда в коде присутствую два скрипта с куками и с сайта модального окна, то на странице не отображается ни одно из окон, а как тольк о удаляю скрипт с куками, то модальное окно начинает работать. Может это поможет в решении моего вопроса?

  7. 14
    Иван

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

  8. 15
    Дмитрий

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

  9. 16
    MahmuD

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

  10. 17
    Игорь
    @

    Да все работает — проверьте пути к скриптам, правильность кода. В папке с файлами проверьте названия файлов — может они не такие, как в статье, а например 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 !

  11. 22
    lxmk

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

  12. 23
    АрХ

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

  13. 24
    Chapman
    @

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

  14. 25

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

  15. 26
    Максим

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

  16. 28
    Александр
    @

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

    • 29

      Вот так:

      (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)
      
  17. 30
    Александр
    @

    Спасибо!

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

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

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

  18. 33
    владимир
    @

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

  19. 34
    Владимир
    @

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

  1. 1

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

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

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

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

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

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