AjaxForm MODX в модальном окне

multipart/form-data

<form method="post" class="ajax_form af_example" enctype="multipart/form-data">

<input type="file" name="img">

<input type="file" name="imgs[]" multiple="multiple">

"Сохраняет в сессию $scriptProperties при вызове сниппета.
Выводит указанную форму, прописывая класс ajax_form и скрытый input для получения $scriptProperties.
Вешает обработчик на форму, чтобы она отправлялась через ajax."

<link rel="stylesheet" href="assets/css/modal.css"/>

AjaxForm.Message.error('Красный popup', 1);

class="modal"

$(function(){$('.openform').click(function(event){event.preventDefault();$('#overlay').fadeIn(400,function(){$('#contactModal').css('display','block').animate({opacity:1,top:'20%'},200);});});$('.exit, #overlay').click(function(){$('#contactModal').animate({opacity:0,top:'45%'},200,function(){$(this).css('display','none');$('#overlay').fadeOut(400);});});$(document).on('af_complete',function(event,response){if(response.success){$('#contactModal').animate({opacity:0,top:'45%'},500,function(){$(this).css('display','none');$('#overlay').fadeOut(400);});}});});
$(function(){$('.openvar1').click(function(event){event.preventDefault();$('#overlay').fadeIn(400,function(){$('#variant1').css('display','block').animate({opacity:1,top:'20%'},200);});});$('.exit, #overlay').click(function(){$('#variant1').animate({opacity:0,top:'45%'},200,function(){$(this).css('display','none');$('#overlay').fadeOut(400);});});$(document).on('af_complete',function(event,response){if(response.success){$('#variant1').animate({opacity:0,top:'45%'},500,function(){$(this).css('display','none');$('#overlay').fadeOut(400);});}});});
$(function(){$('.openvar2').click(function(event){event.preventDefault();$('#overlay').fadeIn(400,function(){$('#variant2').css('display','block').animate({opacity:1,top:'20%'},200);});});$('.exit, #overlay').click(function(){$('#variant2').animate({opacity:0,top:'45%'},200,function(){$(this).css('display','none');$('#overlay').fadeOut(400);});});$(document).on('af_complete',function(event,response){if(response.success){$('#variant2').animate({opacity:0,top:'45%'},500,function(){$(this).css('display','none');$('#overlay').fadeOut(400);});}});});

<a href="#modal1">Ссылка</a>

<div id="modal1"><div>

display: none;

$.ajax({  
type: "POST",  
url: url, 
data: msg,
success:  function(data) {  
$.jGrowl("Вам выслано письмо со ссылкой для активации рассылки!", { life: 10000, position: 'center' });
} 
}); 
return false;
});

type: «POST», 
url: url, 
data: msg,
success: function(data) { 
AjaxForm.Message.success('«Вам выслано письмо со ссылкой для активации рассылки!»');
} 
}); 
return false;
});

<form role="form" action="[[+uri]]" method="post" id="subscribe">
    <input type="textfield" name="email" value="" placeholder="Email для рассылки новостей...">
    <input type="hidden" name="sx_action" value="subscribe">
    <button type="submit" class="le-button">Подписаться</button>
    [[+message]]
</form>

<!--Кнопка Заказать звонок-->
    <button type="button" class="btn btn-success" id="modal" data-target="#modal_form">
            <span class="fa-stack fa-lg">
                <i class="fa fa-phone fa-stack-1x" aria-hidden="true"></i>
                <i class="fa fa-circle-thin fa-stack-2x" aria-hidden="true"></i>
            </span>
            Заказать звонок
    </button>

<!---->
<div id="modal_form">
	  <h3>Заказать звонок!</h3>
	  <div class="comment">Оставьте заявку и наш специалист свяжется с вами в ближайшее время!</div>
      <a class="exit"></a>
[[!AjaxForm?
   &snippet=`FormIt`
   &hooks=`spam,email`
   &emailFrom=`21lux@mail.ru`
   &form=`tpl.AjaxForm`
   &emailTpl=`modal-zv-tpl`
   &emailTo=`21lux@mail.ru`
   &emailSubject=`Заказ звонка с сайта`
   &validate=`phone-zv:required`
   &validationErrorMessage=`Пожалуйста, заполните поля помеченные *`
   &successMessage=`Сообщение успешно отправлено, наш менеджер свяжеться с Вами в ближайшее время`
]]
</div>
<div id="overlay"></div>

$(function() { // вся мaгия пoсле зaгрузки стрaницы
	$('#modal').click( function(event){ // лoвим клик пo ссылки с class="modal"
	event.preventDefault(); // выключaем стaндaртную рoль элементa
	$('#overlay').fadeIn(400, // снaчaлa плaвнo пoкaзывaем темную пoдлoжку
	function(){ // пoсле выпoлнения предъидущей aнимaции
	$('#modal_form') 
	.css('display', 'block') // убирaем у мoдaльнoгo oкнa display: none;
	.animate({opacity: 1, top: '50%'}, 200); // плaвнo прибaвляем прoзрaчнoсть oднoвременнo сo съезжaнием вниз
	});
	});
	/* Зaкрытие мoдaльнoгo oкнa, тут делaем тo же сaмoе нo в oбрaтнoм пoрядке */
	$('.exit, #overlay').click( function(){ // лoвим клик пo крестику или пoдлoжке
	$('#modal_form')
	.animate({opacity: 0, top: '45%'}, 200,  // плaвнo меняем прoзрaчнoсть нa 0 и oднoвременнo двигaем oкнo вверх
		function(){ // пoсле aнимaции
		$(this).css('display', 'none'); // делaем ему display: none;
		$('#overlay').fadeOut(400); // скрывaем пoдлoжку
		}
	);
});
$(document).on('af_complete', function(event, response) {
    if (response.success) { //Если форма заполнена и нет ошибок
   $('#modal_form')
	.animate({opacity: 0, top: '45%'}, 500,  // плaвнo меняем прoзрaчнoсть нa 0 и oднoвременнo двигaем oкнo вверх
		function(){ // пoсле aнимaции
		$(this).css('display', 'none'); // делaем ему display: none;
		$('#overlay').fadeOut(400); // скрывaем пoдлoжку
    });
    }
    });
});

<form method="post" class="ajax_form af_example">
        <input type="hidden" name="title" value="[[*pagetitle]]">
	    <input type="hidden" name="link" value="[[*uri:tag]]">
        <input type="text" placeholder="Как вас зовут?" value="[[+fi.name-zv]]" name="name-zv" id="name" class="input_text form-control"/>
        <span class="error_name">[[+fi.error.name]]</span>
        <input type="text" placeholder="Контактный телефон *" name="phone-zv" value="[[+fi.phone-zv]]" id="phone-zv" class="phone-zv form-control"/>
        <span class="error_message">[[+fi.error.phone-zv]]</span>
		<div class="comment">Поля отмеченные <span class="required">*</span> обязательны для заполнения</div>
        <input class="button" type="submit" value="Перезвоните мне">
    [[+fi.success:is=`1`:then=`
    <div class="alert alert-success">[[+fi.successMessage]]</div>
    `]]
    [[+fi.validation_error:is=`1`:then=`
    <div class="alert alert-danger">[[+fi.validation_error_message]]</div>
    `]]
</form>

<strong>[[+name-zv:empty=`Не заполнено`]]</strong> прислал(а) <strong>заявку на обратный звонок </strong> со страницы: <strong><a href="http://ctolux.ru/[[+link]]">[[+title]]</a></strong> <br />
Данные с формы:<br />
<p>Имя: <strong>[[+name-zv:empty=`Не заполнено`]]</strong></p>
<p>Телефон: <strong>[[+phone-zv]]</strong></p>

Uncaught TypeError: Cannot read property 'find' of undefined
    at Array.success (default.js:43)
    at Object.options.success (jquery.form.js:233)
    at c (jquery-1.10.2.min.js:4)
    at Object.fireWith [as resolveWith] (jquery-1.10.2.min.js:4)
    at k (jquery-1.10.2.min.js:6)
    at XMLHttpRequest.r (jquery-1.10.2.min.js:6)

[[+fi.success:is=`1`:then=`
    <div class="alert alert-success">[[+fi.successMessage]]</div>
    `]]
    [[+fi.validation_error:is=`1`:then=`
    <div class="alert alert-danger">[[+fi.validation_error_message]]</div>
    `]]

<div class="hidden" id="modal_form">

<div id="modal_form">
	  <h3>Заказать звонок!</h3>
	  <div class="comment">Оставьте заявку и наш специалист свяжется с вами в ближайшее время!</div>
      <a class="exit"></a>
[[!AjaxForm?
   &snippet=`FormIt`
   &hooks=`spam,email`
   &emailFrom=`noreply@mail.ru`
   &form=`tpl.AjaxForm`
   &emailTpl=`modal-zv-tpl`
   &emailTo=`info@site-custom.ru`
   &emailSubject=`Заказ звонка с сайта`
   &validate=`mail-zv:required`
   &validationErrorMessage=`Пожалуйста, заполните поля помеченные *`
   &successMessage=`Сообщение успешно отправлено, наш менеджер свяжеться с Вами в ближайшее время`
]]
</div>
<div id="overlay"></div>

<form method="post" class="ajax_form af_example">
        <input type="hidden" name="title" value="[[*pagetitle]]">
	    <input type="hidden" name="link" value="[[*uri:tag]]">
        <input type="text" placeholder="Как вас зовут?" value="[[+fi.name-zv]]" name="name-zv" id="name" class="input_text form-control"/>
        <span class="error_name">[[+fi.error.name]]</span>
        <input type="text" placeholder="Ваш e-mail *" name="mail-zv" value="[[+fi.mail-zv]]" id="mail-zv" class="mail-zv form-control"/>
        <span class="error_message">[[+fi.error.mail-zv]]</span>
		<div class="comment">Поля отмеченные <span class="required">*</span> обязательны для заполнения</div>
        <input class="button" type="submit" value="Перезвоните мне">
    [[+fi.success:is=`1`:then=`
    <div class="alert alert-success">[[+fi.successMessage]]</div>
    `]]
    [[+fi.validation_error:is=`1`:then=`
    <div class="alert alert-danger">[[+fi.validation_error_message]]</div>
    `]]
</form>

<strong>[[+name-zv:empty=`Не заполнено`]]</strong> прислал(а) <strong>заявку на обратный звонок </strong> со страницы: <strong><a href="http://www.valentinadudko.ru/[[+link]]">[[+title]]</a></strong> <br />
Данные с формы:<br />
<p>Имя: <strong>[[+name-zv:empty=`Не заполнено`]]</strong></p>
<p>Почта: <strong>[[+mail-zv]]</strong></p>

[[$ajaxform]]
<a href="[[*uri]]#" class="button is-large modal">Записаться</a>