Доброго вам дня. 🙂
Дану статтю пишу завдяки одному з відвідувачів мого сайту - Олександру Зарко. Олександр в одній зі статей про модальні вікна, поставив запитання, як зробити так, щоб вікно з'являлося лише один раз для кожного відвідувача? Так само воно повинно з'являтися з затримкою. У мене є урок - Спливне модальне вікно при завантаженні сайту з затримкою. але з'являється воно постійно, при кожному завантаженні сторінки. Можливо для Лендінзі це нормально, але для багатосторінкового сайту - це кошмар, тому як відвідувача просто буде напружувати постійне відкриття вікна під час завантаження кожної з них.
Тому постало питання, як до нього прикрутити куки (cookie). щоб вікно з'являлося хоча б раз на добу, ну або більше якщо це потрібно. Щоб це зробити, потрібно трохи вносити зміни і скрипти будуть відрізнятися від попередньої статті, так що викладу все заново вже як треба, щоб усім було зрозуміло.
Для початку додаємо HTML розмітку, чи то пак код самого вікна. Всередину вікна додаєте все що Вам потрібно і все, що хочете побачити. Головне що не можна чіпати - це кнопка закриття вікна. Наш майбутній скрипт буде записувати куки, як раз після натискання на неї. Тобто коли відвідувач натиснув на хрестик, браузер запам'ятає, що віконце більше не показувати.
Далі в файлі стилів задаємо зовнішній вигляд і коректність відображення нашого вікна.
Третім кроком буде вже підключення скриптів. Для початку потрібно підключити бібліотеку jQuery в шапку перед закривається head або в підвал перед закривающімсяbody. Але спочатку подивіться, чи не зроблено це раніше, інакше можливий конфлікт.
Далі підключаємо файл запис на куки. Даний файл потрібно завантажити - jquery.cookie.js
Підключити файл куків потрібно після бібліотеки вказавши шлях до папки, де ви його розташували, якщо він знаходиться в тій же папці де і файл з html, то просто його назва.
В кінці залишилося лише додати скрипт, який буде все це обробляти.
У другому рядку вказуємо айди кнопки закриття, після натискання на яку будуть записані куки.
У четвертому рядку задаємо час, скільки будуть зберігається куки. В даному випадки вікно буде з'являтися раз на добу. Якщо потрібно більше, то просто змініть в третьому рядку значення, наприклад на 3 дні:
Для тих, кому потрібно не в днях, а в хвилинах, то 4 рядок потрібно замінити на ось такі три рядки:
60 * 1000 - це одна хвилина, 60 * 3000 - це три хвилини, ну і так далі.
Також в скрипті є значення 4000 - це мілісекунди і одно все це 4 секундам. Це час затримки появи вікна. За нужді міняєте і вікно з'явиться в потрібний момент.
Ось і все, що потрібно зробити. Ми до старого вікна додали новий скрипт і куки. Вікно підключати можна будь-, головне вказати в останньому скрипті ID кнопки закриття, в даному випадки - #setCookie. і вказати ID вікна, зараз - #bg_popup. Будь-яке вікно буде з'являтися з затримкою і тільки один раз.
На цьому все, спасибі за увагу. 🙂
Привіт дорогий друже
У тебе встановлено розширення AdBlock або подібне. Додай мій сайт в білий список, і тим самим внесеш свій внесок в його розвиток. Інструкція як відключити AdBlock Хочу й собі віконце