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

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

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

    ArcticModal — отличнейший , а главное правильный, скрипт мы успешно его использовали на одном крупном проекте, и он очень хорошо себя показал!
    Очень легко и удобно кастомизировать.
    Но вот почему CDN яндекса? Это просто желание автора или это продиктовано другими объективными причинами?

  2. 4
    @

    Ох блин, сколько я это искал, плюнул, а тут в RSS статья.
    Спасибо! Еще и бесплатно. А есть возможность выбрать частоту изменения кукиса или сброса?

  3. 6
    Андрей
    @

    В DLE не работает этот метод

  4. 8
    mss

    Почему выбран именно arcticModal? Тот же фансибокс умеет гораздо большее и гибко настраивается.

    • 9

      Потому что автор статьи является автором этого скрипта.

    • 10
      Сергей

      arcticModal как раз и написан, потому что остальные не такие гибкие :)

      У fancybox и подобных есть несколько критичных минусов:
      — не позволяют отображать прокрутку окна, если оно не помещается на экран, см. пример Окно с большой высотой: http://arcticlab.ru/arcticmodal/#examples;
      — не позволяют открыть несколько окон;
      — не удобная кастомизация оформления;
      — не удобно работать с несколькими окнами.

      Но у подобных плагинов есть один большой плюс — работа с изображениями :) Но это дело времени — когда-н., такой функционал появится и в arcticModal.

  5. 11

    На многих движках уже используется jQuery, и иногда в ней используется функция jQuery.noConflict(); для того, чтобы не возникали конфликты с другими библиотеками. Поэтому, возможно нужно будет поменять «$» на «jQuery».
    Чтобы проверить, используется ли функция jQuery.noConflict();, просто откройте свою библиотеку, и в конце файла может быть записано: jQuery.noConflict();.
    Если так, тогда меняйте «$» на «jQuery».

  6. 12
    максим

    пытаюсь к вордпрессу прицепить. не получается почему то..
    все как по инструкции.
    вставил в хеад

    <!-- jQuery -->
    <script src="//yandex.st/jquery/1.9.1/jquery.min.js"></script>
    <!-- arcticModal -->
    <script src="arcticmodal/jquery.arcticmodal-0.3.min.js"></script>
    <link rel="stylesheet" href="arcticmodal/jquery.arcticmodal-0.3.css">
    <!-- arcticModal theme -->
    <link rel="stylesheet" href="arcticmodal/themes/simple.css">
    <!-- cookie -->
    <script src="//yandex.st/jquery/cookie/1.0/jquery.cookie.min.js"></script>

    и после боди в нужном месте и в разные пробовал код

    <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: 365,
     path: '/'
    });
    </script>
  7. 14
    Archy

    Такая же проблема. Все подключил — работать не хочет. Перепроверял несколько раз.

    При этом пробовал вызывать окна по кликам из примеров официального сайта — они работают.

    Как быть?

  8. 16

    о, как раз ищу такое. попробую, спасибо!

  9. 17
    Дмитрий

    Не хочет работать, если есть возможность, подскажите пожалуйста.
    Я уже с нуля все начал делать, что бы проверить работу только этого плагина.
    И все равно, куки добавляет, но при их отсутствии модальное окно не появляется.
    Все пути проверены, все файлы на месте.
    вот код.

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

    Буду очень признателен за помощь.

    • 18

      У вас

  10. 20

    Есть ли способ показывать отдельную картинку в модальном окне при клике на ссылку? Сделал так:

    $('body').on('click', 'a[target=_blank][href$=jpg]', function(e) {
     e.preventDefault();
     $.arcticmodal({
     type: 'html',
     content: '<div class="box-modal"><img width="800" src="' + this.href + '" alt=""/></div>'
     });
     });
    
  11. 25

    Через ajax выдал мусор вместо картинки

  12. 26
    Бека

    Отличный скрипт думаю, но у меня (DLE) почему-то не пашет…
    Или этот скрипт не дружит с JS скриптами DLE ?

  13. 43
    Бека

    Я пробовал сделать что-то, как написали в комментарии 17. От туда остался лищний код. Сча убрал, все равно также. Думаю и без доктайпа и кодировки должен работать.

  14. 47
    LOMANI
    @

    jq 1.9.1 конфликтует с DLE 9.8. после подключения данного скрипта отключаются родные скрипты дле при добавлении новости (более не смотрел, этого хватило), без подключения (да и с ключением) окно не всплывает

  15. 48
    Сергей

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

  16. 49
    Banner
    @

    Все никак не получается =( начинаю биться головой о клавиатуру. invite@bannertender.com

  17. 50
    @

    Извиняюсь что не атм пишу, но можешь подсказать ка кназываеться или где откопать переключение как у тебя в сайдбаре справа например «Последние, популярные, рубрики» хочется сделать такое на своем но для комментариев чтоб можно было переключаться между сайтовыми вконтактовскими и фейсбука

  18. 53
    Mike

    Спасибо большое за классный поп-ап!

    Меня интересует как изменить инструкцию к кукам, чтобы окно больше не показывалось человеку, который отправил форму нажав «Отправить». -Куки срабатывают только когда форма была отправлена. И разумеется окно показывалось только при заходе на сайт, а при переходе на другие страницы сайта больше не появлялось.
    Например, для случая с окном «подписаться на новости».
    Это можно какими-то средствами реализовать?

  19. 54
    Igori

    А как сделать время хранения кук в часах, а не в днях?

  20. 56
    Василий
    @

    Подскажите пожалуйста, а как сделать, чтобы окно открывалось с задержкой? Спасибо за помощь…

  1. 1

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

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

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

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

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

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