Как сделать модальное(всплывающее) окно на 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 файле, иначе ваше модальное окно не будет работать.
В данном примере, мы использовали библиотеку Jquery из хранилища Google. В самом конце, мы подключаем javascript библиотеку вконтакте openapi.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 и следите за новыми материалами.
Читайте также
Все материалы с сайта wh-db.com и ru.wh-db.com защищены авторским правом. Копирование, публикация, продажа и распространение материала строго запрещены.
