6.09.13, 12:24
3 комментарий
  Скрипты

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

На некоторых сайтах необходимо при первом посещении показывать посетителю информацию во всплывающем окне. Это может потребоваться, например, для сайтов некоторых тематик, чтобы узнать возраст посетителя. Ещё один вариант использования данного функционала — рассказать кратко о цели сайта. Для реализации такого функционала мы будем использовать jQuery и несколько плагинов к нему.

Чтобы показывать всплывающие окна воспользуемся плагином arcticModal. Этот плагин, в отличие от многих других, позволяет очень просто кастомизировать внешний вид модальных окон. Для того, чтобы показать окно лишь один раз, будем запоминать в куках, что посетитель заходил на сайт.

Установка:
1. Распаковываем содержимое архива в папку с шаблоном и подключаем его, добавив между тегами:

<head></head>



Следующий код:

    <!-- arcticModal -->
    <script type="text/javascript" src="{THEME}/js/jquery.arcticmodal.min.js"></script>  
    <link rel="stylesheet" href="{THEME}/style/jquery.arcticmodal.css">
    <link rel="stylesheet" href="{THEME}/style/simple.css">    
    <script type="text/javascript" src="{THEME}/js/jquery.cookie.min.js"></script> 
    <script>  
    (function($) {  
    $(function() {  
      
      if (!$.cookie('was')) {  
      
          $('#boxUserFirstInfo').arcticmodal({  
              closeOnOverlayClick: false,  
              closeOnEsc: true  
          });  
      
      }  
      
      $.cookie('was', true, {  
          expires: 365,  
          path: '/'  
      });  
      
    })  
    })(jQuery)  
    </script> 




2. Для вывода всплывающего окна с информацией для пользователя, между тегами:

<body></body>



Вставляем:

    <div style="display: none;">  
      <div class="box-modal" id="boxUserFirstInfo">  
          <div class="box-modal_close arcticmodal-close">закрыть</div>  
          <b>Добро пожаловать!</b><br /><br />
          Приветствуем Вас на сайте сообщества Techno-Co.
          Зарегистрируйтесь и вы сможете оставлять комментарии, скачивать файлы.
        </div>  
    </div>



Готово!

Версия DLE: 9.x-10.х
Автор: Dimoxшаблоны для dle 11.2

Комментарии

  1. ToNik Пользователь offline 6 сентября 2013 12:48                    

    На сколько я знаю многих такая фигня бесит...
    Меня уж точно ((:

  1. Halk 6 сентября 2013 12:52                    

    tonik,
    Каждому своё smile
    Вот мне совершенно это пофиг!
    Я на сайт захожу за полезностью boss

  1. vatson 6 сентября 2013 19:34                    

    Halk, огромное тебе СПАСИБО! Давно искал.

Напишите своё мнение