Главная JavaScript

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

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

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

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

    • Я встречал объяснение, что к Яндексу пинг меньше, видимо, из-за этого. Но и с гугловским CDN нет проблем.

    • Доброе время суток ПафНутиЙ. Увас есть живой пример как спомощью ArcticModal отправить ajax запрос и получить ответ от сервера в само модульное окно. Я не смог не как это реализовать это, сколько попыток делал не как уменя не получилось. Вожможно я еще плохо осилил js или сам ArcticModal.

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

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

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

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

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

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

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

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

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

    <!-- 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>
    • Возможно не правильно указаны вот эти пути:

      <script src="arcticmodal/jquery.arcticmodal-0.3.min.js"></script>
      <link rel="stylesheet" href="arcticmodal/jquery.arcticmodal-0.3.css">
      <link rel="stylesheet" href="arcticmodal/themes/simple.css">
      

      Где лежат файлы плагина?

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

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

    Как быть?

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

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

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

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

    • У вас

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

    $('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. Через ajax выдал мусор вместо картинки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      • Спасибо огромное за помощь и оперативный ответ…
        Только я вставил код, сделал 5 секунд, чтобы увидеть быстрее результат, но к сожалению окно не встплыло вообще… что я не так сделал? Код получился такой

        (function ($) {
        $(function () {

        // Проверим, есть ли запись в куках о посещении посетителя
        // Если запись есть — ничего не делаем
        if (!$.cookie ('was')) {

        setTimeout (function () {

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

        }, 5000)

        // Запомним в куках, что посетитель к нам уже заходил
        $.cookie ('was', true, {
        expires: 1,
        path: '/'
        });

        })
        })(jQuery)

      • Отлично! А как сделать, чтобы модальное окно показывалось посетителю при попытке ухода с сайта «на прощание»?

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