Вітаю всіх відвідувачів мого блогу. Один раз переді мною постало завдання зробити модальное (спливаюче) вікно з формою підписки на сайті. Вікно повинне було з'явитися через 40 сек. з початку першого завантаження сайту і причому здатися мало один раз. Взявся - зробив. Тепер подумав, а може ще комусь стане в нагоді.

Давайте тепер в подробицях і з самого початку. Для модальних вікон вирішив використовувати скрипт Magnific Popup. Їм я користуюся давно і мене він абсолютно влаштовує. Про даний jquery плагін я написав детальний огляд , Раджу ознайомитися, тому що особливо його нижче коментувати не буду.

Як завжди, перш, ніж почати давайте спочатку подивимося на кінцевий результат. Модальне віконце здасться через 10 сек. після завантаження сайту. Якщо захочете подивитися віконце ще раз, то очистіть кукі браузера. Я це роблю зазвичай за допомогою інструменту-розширення для браузера Web Developer.

Для початку нам необхідно підключити бібліотеку jQuery, якщо вона у вас не підключена. Також підключаємо плагін Magnific Popup. Наступне, ми також підключимо jQuery плагін роботи з Cookie. Нижче виводимо код ініціалізації плагіна модального вікна. як правильно підключати стилі і скрипти я вже писав, також раджу заглянути.

Спочатку підключимо стилі для Magnific Popup.

<Link href = "/ css / magnific-popup.css" rel = "stylesheet" />

А потім вже скрипти.

<Script src = "// ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </ script> <script src = "/ js / jquery.magnific-popup.min. js "> </ script> <script src =" / js / jquery.cookie.js "> </ script>

Код виклику вікна буде наступним.

<Script> jQuery (document) .ready (function ($) {var cookieOptions = {expires: 3, path: '/'}; if ($ .cookie ( 'visit') == undefined) {setTimeout (function () {$ .cookie ( 'visit', true, cookieOptions); $ .magnificPopup.open ({items: {src: $ ( '# text-popup-load-window'), // може бути HTML рядком, jQuery об'єктом, або CSS селектором}, type: 'inline', removalDelay: 300});}, 10000);}}); // end ready </ script>

В змінної cookieOptions міститься інформація про час життя куки - expires: 3, в даному випадку - 3 дні. Далі ми перевіряємо (if ($ .cookie ( 'visit') == undefined)), якщо куки не визначені, то виконуємо код нижче. Методом setTimeout встановлюємо час затримки показу вікна. Значення встановлюється в мілісекундах - 10000, що відповідає 10 сек.

Відкриває вікно подія $ .magnificPopup.open. Тут особливо коментувати не буду.

Тепер давайте подивимося на HTML-код вікна.

<Div id = "text-popup-load-window" class = "zoom-anim-dialog swing animated white-popup mfp-hide"> <p> А це показ модального вікна через 10 сек. після завантаження сторінки. Показ вікна прив'язаний до cookie браузера, час життя - 3 дні. </ P> </ div>

Зверніть увагу на класи swing animated. Вони задані для анімації вікна за допомогою бібліотеки animate.css . Ви можете використовувати будь-яку анімацію.

Ну ось в принципі і все. Замість тексту можна вивести будь-яку інформацію - банер, форму зв'язку та ін.

Magnific Popup можете завантажити на офіційному сайті плагіна.

На цьому все. Дякуємо за увагу. Питання, як завжди, задаємо в коментарях.

Перевірка орфографії