Вітаю всіх відвідувачів мого блогу. Один раз переді мною постало завдання зробити модальное (спливаюче) вікно з формою підписки на сайті. Вікно повинне було з'явитися через 40 сек. з початку першого завантаження сайту і причому здатися мало один раз. Взявся - зробив. Тепер подумав, а може ще комусь стане в нагоді.
Для початку нам необхідно підключити бібліотеку jQuery, якщо вона у вас не підключена. Також підключаємо плагін Magnific Popup. Наступне, ми також підключимо jQuery плагін роботи з Cookie. Нижче виводимо код ініціалізації плагіна модального вікна. Як правильно підключати стилі і скрипти я вже писав, також раджу заглянути.
Спочатку підключимо стилі для Magnific Popup.
А потім вже скрипти.
Код виклику вікна буде наступним.
Читайте також: CSS анімація на сайті за допомогою бібліотеки Animate.css
Тепер давайте подивимося на HTML-код вікна.
Зверніть увагу на класи swing animated. Вони задані для анімації вікна за допомогою бібліотеки animate.css. Ви можете використовувати будь-яку анімацію.
Ну ось в принципі і все. Замість тексту можна вивести будь-яку інформацію - банер, форму зв'язку та ін.
Посилання на скачування бібліотек
Magnific Popup можете завантажити на офіційному сайті плагіна.
Плагін jQuery Cookie можете завантажити з мого хмари або знайти в інтернеті. Проблем, думаю, тут не буде.
Заур Магомедов
У мене ви можете:
Замовити верстку Замовити сайт під ключ