Используем fancybox и jquery для создания модальных окон

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

Качаем архив с файлами, далее рассмотрим, как можно прикрутить всё это дело в своём проекте. Распакуйте архив, разместите файлы в директорию вашего шаблона, далее подключаем в необходимые файлы в head-заголовке страницы:

<!--подкючаем jquery-->
<script type="text/javascript" src="fancybox/jquery.min.js"></script>

<!--подкючаем fancybox-->
<link rel="stylesheet" type="text/css" media="all" href="fancybox/jquery.fancybox.css">
<script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>

Теперь непосредственно к самой форме. Форма может быть абсолютно произвольная, с набором ваших полей, либо других данных, это не принципиально, ключевой момент тут в том, что всё это дело мы заключаем в блок, и присваиваем ему атрибут id, в моем случае это feedback. В стилях для этого блока устанавливаем значение display:none, чтобы на самой странице форма не показывалась.

<style type="text/css">
#feedback {display:none;}
</style>

<div id="feedback"><!-- hidden inline form -->
	<h2>Отправка сообщения</h2>
	<form id="f_contact" name="contact" action="#" method="post">
		<label for="f_name">Ваше имя</label><br>
		<input type="text" id="f_name" name="f_name"><br>
		<label for="f_email">Ваш E-mail</label><br>
		<input type="text" id="f_email" name="f_email"><br>
		<label for="f_msg">Введите сообщение</label><br>
		<textarea id="f_msg" name="f_msg" class="txtarea"></textarea>
		<button id="f_send">Отправить E-mail</button>
	</form>
</div>

Теперь нам нужна ссылка, по нажатию на которой должно всплывать модальное окно с нашей формой, собственно выгладить будет так:

<a href="#feedback" rel="nofollow" class="modalbox">Обратная связь</a>

Обратите внимание на атрибуты ссылки, в href указан id формы, а так же класс modalbox, который так же будет использован для инициализации всплывающего окна.

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

<script type="text/javascript">
$(document).ready(function(){
	$(".modalbox").fancybox();
	$("#f_contact").submit(function(){ return false; });
	$("#f_send").on("click", function(){
		
		// тут дальнейшие действия по обработке формы
		// закрываем окно, как правило делать это нужно после обработки данных
		$("#f_contact").fadeOut("fast", function(){
			$(this).before("<p><strong>Ваше сообщение отправлено!</strong></p>");
			setTimeout("$.fancybox.close()", 1000);
		});
	});
});
</script>

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