Отправка сообщения






Добро пожаловать!

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

fancybox-modal-windowСоздание модальных окон довольно востребованная необходимость, которая может на практике возникать повсеместно для разных целей, будь то простое информационное сообщение, форма ввода, или что-либо ещё. К счастью уже есть готовые наработки других программистов, которыми можно воспользоваться и тем самым сэкономить своё время для других задач. Сейчас мы поговорим о том, как можно воспользоваться библиотекой 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>

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

Добавил: htmaker, 11.05.2015 г.
 
плохослабосойдетхорошоотлично (4 голосов, средний: 4,00 из 5)
Загрузка...

Комментарии

  1. Андрей пишет:

    Не подскажете как отправить эту форму с помощью ajax, а то в JS ноль:( Заранее спасибо!

    1. htmaker пишет:

      В месте:

      // тут дальнейшие действия по обработке формы

      Добавляете код:

      	$.getJSON('ajax.php', {
      		f_name:		$('#f_name').val(),
      		f_email:	$('#f_email').val(),
      		f_msg:		$('#f_msg').val(),
      	}, function(data){
      		// data - тут ответ скрипта
      	});
      ...

      На стороне сервера следует разместить скрипт ajax.php — обработчик данных с вашей формы на стороне сервера.

  2. игорь пишет:

    я не понимаю
    у меня форма не отправляется изза строки
    $(«#f_contact»).submit(function(){ return false; });
    но если ее убрать модальное окно со словами Спасибо показывается на долю секунды и гаснет

    1. htmaker пишет:

      Данная строка отключает стандартную отправку формы, это нужно для реализации ajax отправки.
      См. мой комментарий выше, там пример кода для ajax запроса.

  3. Константин пишет:

    Подскажите, как сделать так, что бы после отправки формы и закрытия окна форма очищалась и при повторном нажатии на ссылку «Обратная связь» снова открывалось первоначальная форма (чистая)?
    пробовал разные варианты (window.location.reload() или document.getElementById(«contact»).reset()) форма очищается только после двух нажатий на ссылку «Обратная связь».

  4. Варвара пишет:

    Здравствуйте, при размещении такой формы на странице, куда попадают введенные данные? Как сделать так, чтобы эти данные приходили ко мне на емэил?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Форум digital-planet.info

Комментарии

  • Загрузка...

Наверх