Создание модального окна с помощью библиотеки jQuery

 

Создание появляющегося модального окна для интернет-ресурса сделать довольно просто. Для этого будут использоваться библиотеки Jquery и опция Bpopup. Данные продукты с открытым исходным кодом могут использоваться без ограничений.

 

 

Как создать модальное окно за 5 минут

Итак, при создании модального окна будут созданы:

• index.html — основной файл разметки для верстки окна и сопутствующих компонентов;
• main.js — логический блок для работы окна;
• style.css — элемент отвечающий за внешний вид появляющегося окна.

 

 

В данном файле используются jQuery и Bpopup.

Следует отметить, что при использовании jQuery - библиотек, она должна в коде идти первой, для корректного функционирования окна, а впоследствии только все остальные скрипты на jQuery и Javascript.

 

 

В файле index.html использовалась CDN-версии библиотек, то есть данные библиотеки хранятся на внешних сайтах.

В заключении подключается main.js (наш код для логики вызова всплывающего окна) и openapi.js - библиотека для работы с Vkontakte.

 

Создадим файл main.js 

 

В представленном файле задается следующий функционал:

• bclose() — закрывает окно в результате клика по «закрыть»;
• bopen() — открывает окно по нажатии на кнопку «открыть»;
• $(document).ready — при загрузке всех DOM-элементов на странице, позволяет исполнить код в рамках данного блока;
• setTimeout — функция задержки (выставлена на 1 сек.);
• VK.Widgets.Group(...) — загрузка элемента управления в всплывающее окно.

 

А теперь давайте создадим css-стили для нашей страницы:

 

Когда вы сохраните все три файла на вашем компьютере в одной папке и запустите index.html, вы увидите следующий результат:

 

Кстати, если вы хотите изучить основы языка Javascript и библиотеки jQuery, вы можете пройти наш курс.

 

Выводы

Используя библиотеки и готовые решения, большинство популярных задач по программированию веб-сайтов вы можете решить буквально за 5 - 10 минут, а иногда даже заработать на решении подобной задаче 50 - 200 долларов на сайтах фрилансеров.

Если вы хотите научиться создавать сайты на профессиональном уровне и зарабатывать хорошие деньги - вы можете пройти большой курс Профессия веб-программист, который состоит из шести модулей по программированию, а интерактивные задания (написание кода в браузере), не позволят вам заскучать :)