Модальное окно на 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 файле, иначе ваше модальное окно не будет работать. 

В данном примере, мы использовали библиотеку 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 и следите за новыми материалами.





Читайте также


Что такое NodeJS и npm?

XAMPP - как установить и настроить на Mac (Mojave, Sierra)

Как самостоятельно изучить веб-программирование

Взломали Cкайп, что делать?

Что такое реферальный спам в Google Analytics

Постраничная ленивая загрузка (lazy load) постов

Как стать профессиональным веб-разработчиком

Методы setTimeout и setInterval в Javascript

Реализация Lazy Load на Jquery

Три полезных CSS свойства для работы с изображениями

Массивы в Javascript

Что такое TypeScript

CSS3 - Эффект вращения

Sublime Text 3 - удобный редактор кода для веб-разработчиков

Установка и настройка веб-сервера для сайта в Ubuntu

Полезные приложения для веб-разработчиков в Google Chrome

GIT команды: Быстрый старт для новичков

Что такое конструктор в объектно-ориентированном программировании

Что такое объектно-ориентированное программирование

Как отправить форму без перезагрузки страницы (AJAX)

Как быстро создать сайт и привлечь поисковый трафик

Bitbucket: Крутой облачный GIT репозиторий

Javascript: Классы в Javascript

Что такое веб-хостинг и как выбрать хостинг для сайта

SQL запросы: Основы администрирования MySQL

Команды Linux: оболочка BASH

Joomla CMS: Преимущества и недостатки

Качественный сайт: семь ключевых свойств



Все материалы с сайта wh-db.com и ru.wh-db.com защищены авторским правом. Копирование, публикация, продажа и распространение материала строго запрещены.



Комментарии





Anonymous ответить
Спасибо, интересно, Я недавно стал изучать jquery и javascript, не знал про setTimeout, прикольно.
Анастасия ответить
Из 20 просмотренных сайтов самое толковое объяснение. Просто, но ничего не упустили. Спасибо
Сергей Никонов [АДМИНИСТРАТОР] ответить
Спасибо, Анастасия за ваш отзыв!
Ринат ответить
Большое спасибо. Единственно что не хватает данное скрипту, это настроить куки чтобы одному посетителю показывалось окно скажем раз в месяц. Если помогли ты сделать такое было супер.

Оставить комментарий









Поиск хостинга



HDD (mb)
8000
Максимальная цена за месяц, (RUB)
700

Дополнительно







Новые статьи

















ВСЕ СТАТЬИ


Обзоры хостинга















Категории


24x7 Support Web Hosting
Angular JS Web Hosting
Apache Web Hosting
ASP.NET Web Hosting
CPanel Web Hosting
Cron Web Hosting
DirectAdmin Web Hosting
Django Web Hosting
EMail Web Hosting
FireBird Web Hosting
Free Domain Web Hosting
GIT Web Hosting
Jabber Web Hosting
Java Web Hosting
JavaScript Web Hosting
JBoss Web Hosting
JSP Web Hosting
Linux Web Hosting
MERCURIAL Web Hosting
MongoDB Web Hosting
MySQL Web Hosting
NGinx Web Hosting
NodeJS Web Hosting
Perl Web Hosting
PHP Web Hosting
PostgreSQL Web Hosting
Python Web Hosting
Ruby Web Hosting
Russian Web Hosting
Servlets Web Hosting
Spring Web Hosting
SQLite Web Hosting
SSH Web Hosting
SSL Web Hosting
Stream Web Hosting
SVN Web Hosting
TomCat Web Hosting
Unlimited HDD Space Web Hosting
Unlimited Sites Web Hosting
Unlimited Traffic Web Hosting
USA Web Hosting
VmWare Web Hosting
Windows Web Hosting