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

4 years ago | 12.2K

 

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

 

modal-jquery-vkontakte-fructcode

 

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

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

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

 

<!DOCTYPE html>
<html>

	<head>
	  <title>Модальное окно DEMO</title>
	  <meta charset="UTF-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	  <meta name="description" content="Демо урок: Модальное окно">
	  <meta name="keywords" content="modal windows jquery, demo">
      <meta name="author" content="FRUCTCODE.COM">
	  
	  <link rel="stylesheet" href="style.css">
	</head>

	<body>

	<h1>Создание модального окна с помощью библиотеки jQuery</h1>
		<div class="btn_group">
			<a href="#" onclick="bopen();"><span class="btn_close border_radius_class">Вызвать модальное окно</span></a> <br>
			<a href="https://fructcode.com/ru/blog/how-to-create-modal-window-with-jquery/"><span class="btn_close border_radius_class">Прочитать статью на сайте FructCode</span></a>
		</div>

		<div id="popup_vk" style="display: none;">
			<div class="popup_vk border_radius_class"> 
				<div> 
					<h3>Вступите в нашу группу!<h3>
				</div>
		
				<div id="vk_groups_popup"></div>

				<a href="#" onclick="bclose();"> 
					<span class="btn_close border_radius_class">
						закрыть
					</span>
				</a>

			</div>

		</div>

	</body>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bPopup/0.11.0/jquery.bpopup.min.js"></script>
	<script src="https://vk.com/js/api/openapi.js"></script>
	<script src="main.js"></script>
	

</html>

 

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

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

 

интерактивный курс modern javascript

 

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

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

 

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

/* Функция закрывает по нажатие на кнопку модальное окно */
function bclose() {
	$("#popup_vk").bPopup().close();
	return false;
}

/* Функция показывает модальное окно по нажатию на кнопку */
function bopen() {
	$('#popup_vk').bPopup();
	return false;
}

/* Функция отображает модальное окно автоматически после загрузки страницы через одну секунду */
$( document ).ready(function() {
	setTimeout(function() {
        /* Подключение vk виджета с группой*/
        VK.Widgets.Group("vk_groups_popup", {mode: 0, width: "220", height: "400"}, 144839492);
        
        /* Вызываем модальное окно */
        $('#popup_vk').bPopup();	
	}, 1000);
});

 

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

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

 

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

a{
	color: white;
}

.popup_vk {
	border: solid 1px black;
	padding: 10px;
	background-color: white;
	width:100%;
	margin-top:15%;
}

.border_radius_class {
	border-radius: 10px;  
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px;  
}

.btn_close {
    padding: 3%;
    background-color: rgb(249, 72, 11);
    margin-top: 5%;
    margin-bottom: 2%;
    text-align: center;
    display: block;
    text-transform: uppercase;
}

.btn_group {
	width: 30%;
}

#vk_groups_popup {
	margin: 0 auto;
}

 

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

modal-jquery-vkontakte-fructcode

 

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

 

Выводы

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

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

 



Поделитесь в социальных сетях





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

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

На современном Javascript можно разрабатывать не только Frontend часть сайта, но и Backend и в этой...
12.7K

Большое обновление FructCode

Обучайтесь эффективнее на онлайн платформе FructCode с новыми интерактивными заданиями и новыми возм...
17.9K

Что такое Modern Javascript?

Языки программирования развиваются и Javascript не стал исключением. В этой статье вы узнаете о том,...
10.5K

Классы в JAVASCRIPT

У языка Javascript достаточно непривычный для программистов синтаксис, особенно, если раньше они пис...
13.4K

Что такое веб-хостинг

Хостинг - это специализированный компьютер (сервер), который предоставляет пользователям возможности...
16.3K

Как убрать index.php из URL

Для продвижения сайта в интернет, через поисковые системы, необходимы производить оптимизации. При с...
27.3K

Что такое файл index.php?

В этой статье вы узнаете, что такое файл index.php, чем его можно открыть. Мы рассмотрим самый прост...
76.8K























Курс HTML/CSS Advanced. Обучение программирования, уроки программирования
Курс HTML/CSS Advanced. Обучение программирования, уроки программирования
new
пока нет оценок
Сергей Никонов
  • Новинка!
  • 128 заданий
  • 40 видео
  • 11 часов

Курс Bootstrap 4. Обучение программирования, уроки программирования
Курс Bootstrap 4. Обучение программирования, уроки программирования
new
пока нет оценок
Сергей Никонов
  • Уроки Bootstrap 4 в разработке

Курс VueJS Фреймворк. Обучение программирования, уроки программирования
Курс VueJS Фреймворк. Обучение программирования, уроки программирования
new
пока нет оценок
Сергей Никонов
  • Уроки VueJS в разработке

Курс Yii2 Фреймворк. Обучение программирования, уроки программирования
Курс Yii2 Фреймворк. Обучение программирования, уроки программирования
new
пока нет оценок
Сергей Никонов
  • Уроки Yii2 в разработке

Курс Modern Javascript. Обучение программирования, уроки программирования
Курс Modern Javascript. Обучение программирования, уроки программирования
new
4.8 / 164
Сергей Никонов
  • Новинка!
  • 30 заданий
  • 16 видео
  • 2 часа

Курс Javascript/jQuery. Обучение программирования, уроки программирования
Курс Javascript/jQuery. Обучение программирования, уроки программирования
4.7 / 1600
Сергей Никонов
  • 21 заданий
  • 10 видео
  • 1 час

Курс CodeIgniter. Обучение программирования, уроки программирования
Курс CodeIgniter. Обучение программирования, уроки программирования
4.9 / 640
Сергей Никонов
  • 28 заданий
  • 26 видео
  • 6 часов

Курс Linux/GIT/Hosting. Обучение программирования, уроки программирования
Курс Linux/GIT/Hosting. Обучение программирования, уроки программирования
4.9 / 1094
Сергей Никонов
  • 29 заданий
  • 22 видео
  • 2 часа

Курс PHP/MySQL. Обучение программирования, уроки программирования
Курс PHP/MySQL. Обучение программирования, уроки программирования
4.8 / 1379
Сергей Никонов
  • 69 заданий
  • 37 видео
  • 6 часов

Курс Bootstrap 3. Обучение программирования, уроки программирования
Курс Bootstrap 3. Обучение программирования, уроки программирования
4.9 / 2423
Сергей Никонов
  • 50 заданий
  • 25 видео
  • 4 часа

Курс HTML/CSS. Обучение программирования, уроки программирования
Курс HTML/CSS. Обучение программирования, уроки программирования
4.9 / 4760
Сергей Никонов
  • 66 заданий
  • 32 видео
  • 5 часов