О web-разработке
и даже немного больше...

Используем 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>

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

Опубликован: 11.05.2015 г.

См. также:

Загрузка файлов на сервер посредством Ajax
Отложенная загрузка изображений Lazy Load
Анимация набора текста на Typed.js
Анимация отсчёта на jquery-spincrement
Mega Dropdown — Меню для мобильной версии
Отслеживаем клик вне элемента на JQuery
Ajax-загрузка записей при скроллинге и нажатии кнопки
Stimed – задаем CSS-стили по времени

Комментарии

  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. Варвара пишет:

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

  5. Александр пишет:

    Не рассмотрен самый нужный случай
    - из за display:none верстка модалки не участвует в построении DOM и не инициализирует нужные скрипты (например NICESELECT)
    Вопрос как правильно организовать модалку чтоб все скрипты на нем работали или как правильно потом подключить все необходимые скрипты

  6. htmaker пишет:

    У fancybox есть событие afterShow (то есть после открытия окна). В вашем случае можно попробовать инициализировать nice select в момент когда окно уже открылось.

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

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

Комментарии
  • Загрузка...
Друзья сайта