Блог

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

6 years ago
16K
Sergei Nikonov

 

Создание появляющегося модального окна для интернет-ресурса сделать довольно просто. Для этого будут использоваться библиотеки 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 долларов на сайтах фрилансеров.

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