Спливаюче вікно при першому відвідуванні сайту на 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

SEO Блог