Всім привіт! Часто буває, що на деяких сайтах необхідно при першому відвідуванні показувати відвідувачу інформацію у вигляді спливаючого вікна (акції, повідомлення, поздоровлення). Також це може знадобитися, наприклад, для сайтів деяких тематик, щоб дізнатися вік відвідувача. Ще один варіант використання даного функціоналу - розповісти коротко про мету сайту. Щоб створити спливаюче вікно на JQuery тільки при першому заході на сайт заюзать jQuery і кілька плагінів.
Для відображення спливаючого вікна скористаємося плагіном arcticModal. Цей плагін, на відміну від багатьох інших, дозволяє дуже просто змінювати зовнішній вигляд модальних вікон, часто це буває важко робити, особливо якщо більша частина коду генерується бібліотекою.
Для того, щоб показати вікно лише один раз, будемо зберігати в куках інформацію про те, що відвідувач заходив на сайт. Роботу з куками нам забезпечить стандартний плагін cookie.
підключаємо файли
Використовуємо CDN Яндекса, підключаємо в тому випадку, якщо JQuery не використовувався. Вставляємо цей код всередині тега
:Качаємо плагін arcticModal c офіційного сайту і підключаємо:
Для оформлення вікна одключім одну зі стандартних тим arcticModal. Як виглядатимуть вікна, можна подивитися на сайті плагіна.
Якщо вам не підходить таке оформлення, то його можна легко виправити, володіючи навіть невеликими знаннями CSS.
Підключаємо плагін cookie:
Все, що було потрібно, підключено, тепер напишемо код спливаючого вікна з інформацією для користувача:
У коді використовується клас arcticmodal-close. При кліці на елемент з таким класом вікно буде закриватися.
closeOnOverlayClick - параметр визначає чи буде закриватися вікно при кліці по області поза самого вікна;
closeOnEsc - параметр визначає чи буде закриватися вікно при на жатіі на клавішу Esc;