Как с помощью JQuery создать простое модальное окно

Существует множество плагинов, предназначенных для создания модальных окон, но некоторые из них слишком сложны для такой простой задачи, как вывод сообщения в лайтбоксе. В этом статье я покажу, как создать модальное окно JQuery.

Что мы хотим создать

modal_result

Мы хотим создать JQuery-плагин, который при клике будет выводить окно с сообщением в центральной части экрана, а остальная часть экрана будет затемняться. В углу окна будет размещаться крестик, с помощью которого можно будет его закрыть.

Я хочу сохранить все файлы окна и стили внутри плагина, поэтому нам останется только подключить плагин в документе. Как правило, с помощью других плагинов нужно создавать панель самостоятельно, а JQuery-плагин просто выводит ее. Я хочу сделать плагин, который создает модальное окно и задает его стили.

HTML

HTML-код очень прост. Мы хотим, чтобы плагин запускался при возникновении события клика по ссылке, так что нам нужно создать ссылку и добавить класс, чтобы мы позже могли ссылаться на него:

<a href="#" class="paulund_modal">Кликните здесь</a>

Сейчас у нас нет никакого CSS, и мы можем переходить непосредственно к созданию плагина простого модального окна JQuery.

Создание JQuery-плагина модального окна

Создайте новый файл JavaScript, назовите его jquery.paulund_modal_box.js и сохраните в той же папке, в которой находится веб-страница:

(function($){

	// Определение плагина jQuery
	$.fn.paulund_modal_box = function(prop){

		// Параметры по умолчанию

		var options = $.extend({
			height : "250",
			width : "500",
			title:"JQuery Modal Box Demo",
			description: "Example of how to create a modal box.",
			top: "20%",
			left: "30%",
		},prop);
				
		return this.click(function(e){
		     //Здесь помещаются разные вещи
		});
				 		
		return this;
	};
	
})(jQuery);

Приведенная выше базовая структура будет создавать плагин paulund_modal_box, и при возникновении события клика по элементу будет выводить JQuery модальное окно по центру. Я также добавил ряд параметров по умолчанию, которые мы можем использовать, чтобы построить панель.

Теперь нам нужно по клику отображать модальное окно. Так как мы не используем на странице ни HTML, ни CSS нам нужно выполнить ряд задач:

  1. Заблокировать остальную часть экрана, чтобы мы могли видеть только модальное окно;
  2. Создать HTML-разметку модального окна;
  3. Задать стили двух новых элементов;
  4. Вывести модальное окно.

Нам нужно добавить к событию клика следующие функции:

return this.click(function(e){
	add_block_page();
	add_popup_box();
	add_styles();
			
	$('.paulund_modal_box').fadeIn();
});

Теперь у нас есть вызов нужных функций, которые мы хотим использовать, давайте добавим их функционал.

Добавление блокировки страницы

Для этого нужно добавить затемненный div, который закроет пользователю доступ к другим областям страницы, когда на экране будет выводиться JQuery модальное окно с формой.

Мы используем div, который будет охватывать весь экран, в него мы добавим модальное окно.

Создайте функцию add_block_page(), которая создает div и добавляет его в тег body в HTML:

function add_block_page(){
	var block_page = $('<div class="paulund_block_page"></div>');
						
	$(block_page).appendTo('body');
}

Мы хотим, чтобы это окно занимало весь экран и блокировало его, поэтому давайте добавим функцию, которая будет определять стили:

function add_styles(){			
        /*Блокировка перекрытой страницы*/
	var pageHeight = $(document).height();
	var pageWidth = $(window).width();

	$('.paulund_block_page').css({
		'position':'absolute',
		'top':'0',
		'left':'0',
		'background-color':'rgba(0,0,0,0.6)',
		'height':pageHeight,
		'width':pageWidth,
		'z-index':'10'
	});
}

Теперь экран заблокирован, и мы можем добавить в div простое модальное окно JQuery.

Создание модального окна

Чтобы создать модальное окно, мы используем функцию add_popup_box():

function add_popup_box(){
	 var pop_up = $('<div class="paulund_modal_box"><a href="#" class="paulund_modal_close"></a><div class="paulund_inner_modal_box"><h2>' + options.title + '</h2><p>' + options.description + '</p></div></div>');
	$(pop_up).appendTo('.paulund_block_page');
			 			 
	$('.paulund_modal_close').click(function(){
            $('.paulund_block_page').fadeOut().remove();		
            $(this).parent().fadeOut().remove();					 
	});
}

Этот код создает div, который содержит название, описание и ссылку для закрытия модального окна JQuery. Затем он добавляет модальное окно к блокирующему div и перехватывает событие клика для закрытия панели, чтобы убрать модальное окно.

Нам нужно задать стили для модального окна, поэтому добавьте следующий код в функцию add_styles, которую мы создали выше:

$('.paulund_modal_box').css({ 
		'position':'absolute', 
		'left':options.left,
		'top':options.top,
		'display':'none',
		'height': options.height + 'px',
		'width': options.width + 'px',
		'border':'1px solid #fff',
		'box-shadow': '0px 2px 7px #292929',
		'-moz-box-shadow': '0px 2px 7px #292929',
		'-webkit-box-shadow': '0px 2px 7px #292929',
		'border-radius':'10px',
		'-moz-border-radius':'10px',
		'-webkit-border-radius':'10px',
		'background': '#f2f2f2', 
		'z-index':'50',
	});
	$('.paulund_modal_close').css({
		'position':'relative',
		'top':'-25px',
		'left':'20px',
		'float':'right',
		'display':'block',
		'height':'50px',
		'width':'50px',
		'background': 'url(images/close.png) no-repeat',
	});
	$('.paulund_inner_modal_box').css({
		'background-color':'#fff',
		'height':(options.height - 50) + 'px',
		'width':(options.width - 50) + 'px',
		'padding':'10px',
		'margin':'15px',
		'border-radius':'10px',
		'-moz-border-radius':'10px',
	        '-webkit-border-radius':'10px'
	});

Вот и все, теперь наш JQuery-плагин завершен.

Готовый JQuery-плагин

На тот случай, если вы пропустили предыдущие шаги, ниже приводится код готового плагина модального окна JQuery:

(function($){

	// Определение плагина jQuery

	$.fn.paulund_modal_box = function(prop){

		// Параметры по умолчанию

		var options = $.extend({
			height : "250",
			width : "500",
			title:"JQuery Modal Box Demo",
			description: "Example of how to create a modal box.",
			top: "20%",
			left: "30%",
		},prop);
				
		return this.click(function(e){
			add_block_page();
			add_popup_box();
			add_styles();
			
			$('.paulund_modal_box').fadeIn();
		});
		
		 function add_styles(){			
			$('.paulund_modal_box').css({ 
				'position':'absolute', 
				'left':options.left,
				'top':options.top,
				'display':'none',
				'height': options.height + 'px',
				'width': options.width + 'px',
				'border':'1px solid #fff',
				'box-shadow': '0px 2px 7px #292929',
				'-moz-box-shadow': '0px 2px 7px #292929',
				'-webkit-box-shadow': '0px 2px 7px #292929',
				'border-radius':'10px',
				'-moz-border-radius':'10px',
				'-webkit-border-radius':'10px',
				'background': '#f2f2f2', 
				'z-index':'50',
			});
			$('.paulund_modal_close').css({
				'position':'relative',
				'top':'-25px',
				'left':'20px',
				'float':'right',
				'display':'block',
				'height':'50px',
				'width':'50px',
				'background': 'url(images/close.png) no-repeat',
			});
                        /*Блокировка перекрываемой страницы*/
			var pageHeight = $(document).height();
			var pageWidth = $(window).width();

			$('.paulund_block_page').css({
				'position':'absolute',
				'top':'0',
				'left':'0',
				'background-color':'rgba(0,0,0,0.6)',
				'height':pageHeight,
				'width':pageWidth,
				'z-index':'10'
			});
			$('.paulund_inner_modal_box').css({
				'background-color':'#fff',
				'height':(options.height - 50) + 'px',
				'width':(options.width - 50) + 'px',
				'padding':'10px',
				'margin':'15px',
				'border-radius':'10px',
				'-moz-border-radius':'10px',
				'-webkit-border-radius':'10px'
			});
		}
		
		 function add_block_page(){
			var block_page = $('<div class="paulund_block_page"></div>');
						
			$(block_page).appendTo('body');
		}
		 		
		 function add_popup_box(){
			 var pop_up = $('<div class="paulund_modal_box"><a href="#" class="paulund_modal_close"></a><div class="paulund_inner_modal_box"><h2>' + options.title + '</h2><p>' + options.description + '</p></div></div>');
			 $(pop_up).appendTo('.paulund_block_page');
			 			 
			 $('.paulund_modal_close').click(function(){
				$(this).parent().fadeOut().remove();
				$('.paulund_block_page').fadeOut().remove();				 
			 });
		}

		return this;
	};
	
})(jQuery);

Использование JQuery-плагина

Мы создали плагин, но как его использовать? Вернитесь к HTML и подключите JQuery и плагин в теге head:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="jquery.paulund_modal_box.js"></script>

Теперь плагин подключен к странице, чтобы мы могли назначить его для ссылок и вызывать модальное окно JQuery UI по клику.

Создайте тег script перед закрытием body и добавьте в него следующий код:

<script>
$(document).ready(function(){
	$('.paulund_modal').paulund_modal_box();
});
</script>

Когда вы нажимаете на ссылку, будет открываться модальное окно, реализованное с помощью созданного плагина. Если вы создадите несколько ссылок с классом .paulund_modal, то каждый раз после нажатия на эти ссылки будет выводиться модальное окно.

Использование параметров

В начале статьи я говорил о параметрах по умолчанию, которые используются для построения модального окна JQuery. Вот, как вы можете изменить параметры по своему усмотрению:

$(document).ready(function(){
	$('.paulund_modal').paulund_modal_box();
	$('.paulund_modal_2').paulund_modal_box({
		title:'Второй заголовок окна',
		description:'Пользовательское описание для окна <br/><br/>Quisque sodales odio nec dolor porta sed laoreet mauris pretium. Aenean id mauris ligula, semper pulvinar dolor. Suspendisse rutrum, libero eu condimentum porta, mauris mauris semper augue, ut tempor nunc arcu vel ligula. Quisque orci eros, consequat vel iaculis eget, blandit bibendum est. Morbi ac tellus dui. Nullam eget eros et lectus dignissim placerat. Nulla facilisi. Ut congue posuere vulputate.'
	});
	$('.paulund_modal_3').paulund_modal_box({
		title: 'Изменить заголовок и высоту',
		height: '500'
	});
	$('.paulund_modal_4').paulund_modal_box({
		title: 'Изменить заголовок и ширину',
		width: '800'
	});
	$('.paulund_modal_5').paulund_modal_box({
		title:'Second Title Box',
		description:'Пользовательское описание для окна <br/><br/>Quisque sodales odio nec dolor porta sed laoreet mauris pretium. Aenean id mauris ligula, semper pulvinar dolor. Suspendisse rutrum, libero eu condimentum porta, mauris mauris semper augue, ut tempor nunc arcu vel ligula. Quisque orci eros, consequat vel iaculis eget, blandit bibendum est. Morbi ac tellus dui. Nullam eget eros et lectus dignissim placerat. Nulla facilisi. Ut congue posuere vulputate.',
		height: '500',
		width: '800'
	});
});
</script>

Перевод статьи «How To Create A Simple Modal Box With JQuery» был подготовлен дружной командой проекта Сайтостроение от А до Я.