Спливаюче вікно при першому відвідуванні сайту на jQuery

Уявляю вашій увазі гостьовий пост від Сергія Предводітелева, одного з розробників Арктичної Лабораторії .

***

На деяких сайтах необхідно при першому відвідуванні показувати відвідувачу інформацію у спливаючому вікні. Це може знадобитися, наприклад, для сайтів деяких тематик, щоб дізнатися вік відвідувача. Ще один варіант використання даного функціоналу - розповісти коротко про мету сайту.

Для реалізації такого функціоналу ми будемо використовувати jQuery і кілька плагінів до нього.

Щоб показувати спливаючі вікна скористаємося плагіном arcticModal . Цей плагін, на відміну від багатьох інших, дозволяє дуже просто кастомизировать зовнішній вигляд модальних вікон.

Для того, щоб показати вікно лише один раз, будемо запам'ятовувати в куках, що відвідувач заходив на сайт. Роботу з куками нам забезпечить невеликий плагін з простим ім'ям cookie.

Підключаємо необхідні файли

Якщо на вашому сайті не підключений jQuery, то підключимо його. Використовуємо CDN Яндекса. Вставляємо цей код всередині тега

:

Тепер займемося плагіном для спливаючих вікон. Викачуємо arcticModal c офіційного сайту і підключаємо його:



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


Якщо вам не підходить таке оформлення, то його можна легко виправити, володіючи навіть невеликими знаннями CSS. В якості основи можна взяти файл стилів стандартної теми.

Підключаємо плагін cookie (теж з Яндекса):


HTML

Все, що було потрібно, підключено, тепер напишемо код спливаючого вікна з інформацією для користувача:


  
    закрити
    Здрастуй, мила людина!

    

    Сподіваюся тобі сподобається на нашому сайті!
    У нас багато цікавої інформації і дуже чуйне ком'юніті.
    Ласкаво просимо :)
  

У коді використовується клас arcticmodal-close. При кліці на елемент з таким класом вікно буде закриватися.

Код JS

І, нарешті, напишемо скрипт, який і реалізує всю логіку:


(Function ($) {
$ (Function () {

  //Перевіримо, чи є запис в куках про відвідування відвідувача
  //Якщо запис є - нічого не робимо
  if (! $. cookie ('was')) {

    //Покажемо спливаюче вікно
    $ ('# BoxUserFirstInfo'). Arcticmodal ({
      closeOnOverlayClick: false,
      closeOnEsc: true
    });

  }

  //Запам'ятаємо в куках, що відвідувач до нас вже заходив
  $. Cookie ('was', true, {
    expires: 365,
    path: '/'
  });

})
}) (JQuery)

Параметр closeOnOverlayClick при виклику arcticModal визначає, чи буде закриватися вікно при кліці на оверлее (шару, перекривали весь контент, тобто при кліці поза вікна), а параметр closeOnEsc - при натискання кнопки Esc.

Параметр expires при збереженні запису в куках задає час зберігання куки в днях. У нашому випадку 365 днів, тобто протягом року після відвідування сайту ми не показуватимемо вікно. При кожному відвідуванні кука оновлюється.

Посилання

Опубліковано: 02/04/13 @ 06:55
Розділ javascript

Рекомендуємо:

23 - 25 серпня, Одеса - OdessaCamp 2013
Дайджест цікавих вакансій № 96
Бесіда з Михайлом Лазор , директором львівського Ерамов
Отримання перших інвестицій в стартап
Чи потрібно відповідати на хороші відгуки ? Історія про диво- сумці GeniusPack