Модальне вікно на Jquery
Web-hosting rating: 8 out of 10 with 325 ratings
Як зробити модальное (спливаюче) вікно на Jquery
Для тих хто хоче побачити роботу модального вікна, натисніть на кнопку ДЕМО УРОКУ:
Модальне вікно для вашого сайту можна зробити дуже швидко. Для цього ми візьмемо дві бібліотеки: Jquery і плагін BPopup. Бібліотека Jquery і плагін BPopup це open source продукти, а значить ви можете вільно їх використовувати для своїх потреб.
Також, для того щоб створити спливаюче вікно для вашого сайту, ми створимо три файли: index.html, main.js і style.css.
index.html - це наш головний файл в якому ми будемо верстати спливаюче вікно і інші його елементи.
main.js - в ньому розташовується логіка роботи модального вікна
style.css - тут ми пишемо базові стилі для модального вікна
файл index.html
У файлі index.html ми підключили бібліотеки Jquery і Bpopup. Потім main.js.
Тут я зроблю важливе зауваження: якщо ви використовуєте бібліотеку jquery, вам необхідно, щоб вона підключалася найперша, а тільки потім інші js файлі, інакше ваше модальное вікно не буде працювати.
файл main.js
У файлі main.js ми написали три функції: bclose (), bopen (), setTimeout в блоці document.ready.
bclose () - Функція закриття модального вікна при натисканні на кнопку "ЗАКРИТИ"
bopen () - Функція, як ви напевно здогадалися, відображає модальне вікно при натисканні на кнопку "ВИКЛИКАТИ модальне вікно"
Блок $ (document) .ready - позначає, що ми виконуємо код всередині цього блоку тільки тоді, коли всі DOM елементи сторінки будуть завантаженість
Функція setTimeout - дозволяє виконати метод із затримкою. У нас ця затримка виставлена в 1 секунду = (1000мс)
VK.Widgets.Group (.) Як ви вже напевно здогадалися, потрібна для того, щоб довантажити віджет вконтакте в модальне вікно
$ ( '# Popup_vk'). BPupub () - викликає наше спливаюче вікно
файл style.css
У файлі style.css ми задаємо стилі для модального вікна і кнопок.
Як ви бачите, зробити модальное (спливаюче) вікно для вашого сайту дуже просто. Завантажити приклад ви можете за цим посиланням. Після того як скачаєте приклад, вам необхідно розпакувати і запустити файл index.html. Якщо у вас залишилися питання, задавайте їх і ми з задоволенням відповімо.
Приєднуйтесь до нашої групи vk і стежте за новими матеріалами.
Доступ до закритого розділу сайту