Обратный звонок в модальном окне MODx

Модальное окно для MODx

Всем привет!

Я, частный вебмастер и иногда у меня случается так, что нужно быстро прикрепить к сайту на MODx - форму обратного звонка, но использовать готовые снипеты не хочется, поэтому я решил создать эту статью для быстрого решения простой формой обратного звонка для MODx revo с использованием снипета Formit.

P.S. Если хотите сделать обратный звонок с использованием Ajax (без перезагрузки страницы), то вот новая статья  - AjaxForm MODX в модальном окне

Для начала необходимо установить сниппет Formit, дабы получать сообщения.

Установили? пойдём дальше.

Давайте создадим html структуру окна:

<div id="modal_form">
	  <h2>Заказать звонок!</h2>
	  <div class="comment">Оставьте Ваши данные и мы перезвоним Вам!</div>
      <a class="exit"></a>
	  <form method="post">
        <input type="text" placeholder="Как вас зовут?" name="name-zv" id="name" class="input_text">
        <input type="text" placeholder="Контактный телефон *" name="phone-zv" id="phone-zv" class="phone-zv">
		<div class="comment">Поля отмеченные <span class="required">*</span> обязательны для заполнения</div>
        <input class="button" type="submit" value="Перезвоните мне">
    </form>
</div>
<div id="overlay"></div><!-- Пoдлoжкa -->

Отлично! Дальше идёт CSS modal.css

#modal_form {
	width: 350px; 
	height: 270px; /* Рaзмеры дoлжны быть фиксирoвaны */
	border-radius: 5px;
	background: #fff;
	position: fixed; /* чтoбы oкнo былo в видимoй зoне в любoм месте */
	top: 45%; /* oтступaем сверху 45%, oстaльные 5% пoдвинет скрипт */
	left: 50%; /* пoлoвинa экрaнa слевa */
	margin-top: -135px;
	margin-left: -175px; /* тут вся мaгия центрoвки css, oтступaем влевo и вверх минус пoлoвину ширины и высoты сooтветственнo =) */
	display: none; /* в oбычнoм сoстoянии oкнa не дoлжнo быть */
	opacity: 0; /* пoлнoстью прoзрaчнo для aнимирoвaния */
	z-index: 5; /* oкнo дoлжнo быть нaибoлее бoльшем слoе */
	padding: 20px 10px;
}
/* Пoдлoжкa */
#overlay {
	z-index:3; /* пoдлoжкa дoлжнa быть выше слoев элементoв сaйтa, нo ниже слoя мoдaльнoгo oкнa */
	position:fixed; /* всегдa перекрывaет весь сaйт */
	background-color:#000; /* чернaя */
	opacity:0.8; /* нo немнoгo прoзрaчнa */
	-moz-opacity:0.8; /* фикс прозрачности для старых браузеров */
	filter:alpha(opacity=80);
	width:100%; 
	height:100%; /* рaзмерoм вo весь экрaн */
	top:0; /* сверху и слевa 0, oбязaтельные свoйствa! */
	left:0;
	cursor:pointer;
	display:none; /* в oбычнoм сoстoянии её нет) */
}
/* Стили для поля ввода */
#modal_form input[type="text"] {
    background-color: #fff;
    border: 1px solid #c0c0c0;
    border-radius: 1px;
    color: #555;
    display: block;
    font-size: 1em;
    height: 30px;
    padding: 5px;
    margin-bottom: 17px;
    width: 95%;
    float: left;
}
/* Стилия для заговка и надписей */
#modal_form  h2{
	text-align: center;
}
#modal_form .comment {
    color: #797979;
    padding-bottom: 15px;
    font-size: 12px;
}
/* Кнопка закрыть */
.exit {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 28px;
    height: 28px;
    text-decoration: none;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 2px solid #3e5368;
    -webkit-transition: background 0.2s linear;
    -moz-transition: background 0.2s linear;
    -o-transition: background 0.2s linear;
    transition: background 0.2s linear;
}
.exit:after{
    display: block;
    font-size: 28px;
    content: "x";
    padding-left: 7px;
    line-height: 26px;
    cursor: pointer;
    text-decoration: none;
    color: #3e5368;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.exit:hover {
    background: #DCDCDC;
}
/* Кнопка отправить */
#modal_form .button {
	display: block;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #555;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    height: 34px;
    margin: 10px 0;
    padding: 2px 16px;
    width: 185px;
	margin: 0 auto;
}
#modal_form .button:hover {
    background-color: #4683ea;
    border: 1px solid #4387fd;
    color: #fff;
}

А вот и наш JS

$(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жку
		}
	);
});
});

Со скриптом всё ясно, сначала мы создаём крутой эффект с помощью animate изменяя прозрачность(opacity) и пoзицию пo вертикaли(top).

Теперь у нас есть готовый скрипт модального окна и стили для него, теперь нам ничего не мешает прикрутить его к MODx revo.

Для начала подключаем в head modal.css и modal.js, да не забываем про jquery, иначе скрипт работать не будет.

Теперь создадим чанк modal с нашей html структурой, но ещё добавим снипет formit, в итоге получится так:

[[!FormIt?
   &hooks=`spam,email,redirect`
   &emailTpl=`modal-zv-tpl`
   &emailTo=`mail@mail.ru`
   &emailSubject=`Заказ обратного звонка`
   &redirectTo=`33`]]
<div id="modal_form">
    <h2>Заказать звонок!</h2>
	<div class="comment">Оставьте Ваши данные и мы перезвоним Вам!</div>
    <a class="exit"></a>
	<form method="post">
        <input type="text" placeholder="Как вас зовут?" name="name-zv" id="name" class="input_text">
        <input type="text" placeholder="Контактный телефон *" name="phone-zv" id="phone-zv" class="phone-zv">
		<div class="comment">Поля отмеченные <span class="required">*</span> обязательны для заполнения</div>
        <input class="button" type="submit" value="Перезвоните мне">
    </form>
</div>

Сначала вызываем Formit, дальше указываем чанк обработчика &emailTpl=`modal-zv-tpl`, дальше почту, тему и куда перенаправлять после успешной отправки.

Теперь создадим наш шаблон modal-zv-tpl для обработчика formit.

<strong>[[+name-zv]]</strong> просит Вас <strong>перезвонить!</strong> <br />
Данные с формы:<br />
<p>Имя: <strong>[[+name-zv]]</strong></p>
<p>Тел.: <strong>[[+phone-zv]]</strong></p>

На этом всё. Если у Вас остались вопросы, задавайте через форму ниже.

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

Кстати возможно Вас заинтересует: как отправить сообщение с формы в Telegram

Если у Вас не получается установить, свяжитесь со мной и я установлю Вам за приемлемую стоимость.

*В демонстрации форма не отправляет сообщения

Лучший способ выразить благодарность автору - поделиться с друзьями!

Спасибо, что поделились :)

Понравилась статья? Не хотите пропустить новые материалы от частного вебмастера?

Подписывайтесь на обновления блога

23.01.2016 / 7966

No avatar

Комментарии (79)

  1. Анатолий 01 мая 2017, 08:25 # 0
    Попробовал сделать все по вашему, письма не отправляет.
    Добавил в форму модального окна код для полей эл. почты:
    и письма пошли! У меня даже из чанка, который содержит форму обратного письма нет ничего по эл. почте.
    И что с этим делать?
    1. Анатолий 01 мая 2017, 07:46 # 0
      Не показывает в сообщении полностью код, но и так понятно, когда убираю в html-коде все, что касается вывода поля для почты, письма не отправляет
      1. Анатолий 01 мая 2017, 07:42(Комментарий был изменён) # 0
        Здравствуйте, сделал обр.звонок через formit на основе формы обратной связи, все работает, но хочу убрать поле с email. Убираю в форме модального окна поле с почтой — все, письма не отправляет мне на почту. Вообще больше ничего делаю, только убирю из html формы это:
        [[!+fi.error.email]] />
        Либо полностью это:

        Почта-обязательно!
        [[!+fi.error.email]] />
        ПОДСКАЖИТЕ, ПОЖАЛУЙСТА, КАК ВЫЙТИ ИЗ ПОЛОЖЕНИЯ?
        1. Игорь 01 мая 2017, 10:21 # 0
          Тогда укажите
          &emailFrom=`no-reply@domain.ru`
          Где domain ваш домен
          1. Анатолий 01 мая 2017, 13:19 # 0
            Спасибо, все получилось. Теперь осталось настроить, чтобы не закрывал окно по кнопке позвоните мне, если поля не заполнены!
            1. Игорь 01 мая 2017, 13:29 # 0
              Пожалуйста. Для этого делайте проверку заполнения полей на JS или настройте форму через AjaxForm igamov.ru/blog/obratniy-zvonok-na-ajaxform-modx
              1. Anatoly 01 мая 2017, 15:50 # 0
                Я немного иначе сделал, прежде чем дописывать скрипт, тем более я скрипты не пишу, я сделал так:
                В вызове сниппета дописал: &validate=`name:required,phone:required`
                И в html-код формы в строке каждого из полей: required />
                Теперь окно кнопкой не закроешь, пока хоть одно поле не заполнено!
              2. Сергей 13 апреля 2017, 18:04(Комментарий был изменён) # 0
                Добрый день. Дошел до момента:
                "… Сначала вызываем Formit, дальше указываем чанк обработчика &emailTpl=`modal-zv-tpl`, дальше почту, тему и куда перенаправлять после успешной отправки..."
                и встал.
                Очень нужна ваша помощь/консультация. Все вопросы отправил на почту. Подскажите, пожалуйста, как действовать дальше.
                1. Игорь 13 апреля 2017, 18:14 # 0
                  Ответил Вам на почту
                2. Игорь 17 августа 2016, 01:38 # 0
                  Здравствуйте.
                  Может Вы сможете мне помочь? голову сломал уже.
                  Поставил обратную связь с помощью ajaxForm письма отправляются, но при этом перезагружается страница и не появляются оповещения об успешном отправлении. Неудобно тем что форма внизу сайта, а после перезагрузки возвращается вверх.
                  в консоли ошибка default.js:11 Uncaught TypeError: $ is not a function
                  1. Игорь 19 августа 2016, 09:34 # 0
                    Проблема в том, что вы не подключили библиотеку jquery.
                  2. Виталий 11 августа 2016, 14:52 # 0
                    А как можно поставить такую же форму на сайт не на MODx?
                    1. Игорь 12 августа 2016, 09:14 # 0
                      Скачайте исходники, по ссылке в статье. Дальше прикрутите Php через Ajax.
                      1. Виталий 12 августа 2016, 09:17 # 0
                        У меня с php проблемы. Можете помочь? Я не знаю, что писать вместо
                        [[!FormIt?
                           &hooks=`spam,email,redirect`
                           &emailTpl=`modal-zv-tpl`
                           &emailTo=`mail@mail.ru`
                           &emailSubject=`Заказ обратного звонка`
                           &redirectTo=`33`]]
                      2. Павел 31 июля 2016, 17:10 # 0
                        Не особо разбираюсь в этом всем. Но пробую. Устанавливаю все как написано работает нормально, отправляет нормально, как только добавляю свой файл стилей style.css перестает работать видимо конфликт с modal.css. Что делать?
                        1. Игорь 31 июля 2016, 17:12 # 0
                          Скидывайте линк вашего сайта, я посмотрю.
                          1. Павел 31 июля 2016, 17:18 # 0
                            styazhka-pola.ru/test.html
                            Это тестовая страница. Подскажите пожалуйста что не так?
                            1. Игорь 31 июля 2016, 17:25(Комментарий был изменён) # 0
                              Ссылка с классом modal, скрыта. В style.css строка 1183. Исправьте пока что это.
                              Сайт закрыли, дальше не успел посмотреть
                              1. Павел 31 июля 2016, 18:05 # 0
                                Понял спасибо. Главное искал это строчки и не увидел. Спасибо большое. А что делать с содержанием modal в css как исправлять дабы не навредить?
                                1. Павел 01 августа 2016, 17:38 # 0
                                  Пробовал переименовать modal в style.css даже убирал но все равно конфликт. Жаль пока что лучшее что я нашел в интернете :) бум копать дальше.
                                  1. Павел 03 августа 2016, 11:49 # 0
                                    Спасибо. Оказалось конфликт у меня в голове а не в css :) Подправил все работает на ура! Успехов вам.
                                    1. Игорь 03 августа 2016, 23:46 # 0
                                      Спасибо, хорошо что разобрались. Вам тоже успехов.
                                    2. Евгений 07 июля 2016, 22:23(Комментарий был изменён) # 0
                                      Добрый вечер. Все сделал по инструкции, но по ссылке окно не открывается, хотя сама ссылка как-будто «залипает» в нажатом положении, если кликнуть где-нибудь в другой области сайта, она снова «отлипает». Можете подсказать что не так? Сайт riverheat.ru.xn--80aauktf0a4f.xn--80aswg/, там в секции Остались вопросы маленькая ссылка «Окно», вот на нем пробовал, не открывается.
                                      1. Игорь 07 июля 2016, 22:37(Комментарий был изменён) # 0
                                        Окно открывается. Видимо уже решили проблему. Осталось настроить CSS. Ссылку лучше ставить так:
                                        <a href="[[*uri]]#">окно</a>
                                      2. Роман 31 мая 2016, 17:02 # 0
                                        Всем привет! Кто сталкивался с такой проблемой, суть такова — есть почта Яндекс для домена. info@mydamain.ru. Formit шлет по smtp самоу себе т.е. отправитель и получатель info@mydamain.ru, Письма не приходят. а стоит только указать получателя mymail@yandex.ru то почта приходит. Кто встречался с такой проблемой и как ее решить?
                                        1. Игорь 01 июня 2016, 17:27(Комментарий был изменён) # 0
                                          Можно подключить свой домен к Яндекс Почте и всё будет нормально. Линк: pdd.yandex.ru
                                        2. Кирилл 26 мая 2016, 01:22 # 0
                                          Ой, спасибо Вам огромное, буду ждать тогда и смотреть эту тему, еще раз спасибо!
                                          1. Кирилл 26 мая 2016, 00:41 # 0
                                            До этого просто не работал с этим сниппетом!
                                            Я был бы Вам очень признателен
                                            1. Кирилл 26 мая 2016, 00:40 # 0
                                              А вы бы не могли любой пример кода с настройкой выложить чтоб примерно понимать что и куда вставлять исходя из вашего модального окна??
                                              1. Игорь 26 мая 2016, 00:46 # 0
                                                Напишу тогда новую статью или просто добавлю к этой статье, как использовать Ajax Form и попробую реализовать как Вы выше написали.
                                              2. Кирилл 18 мая 2016, 18:00 # 0
                                                Подскажи Игорь, а нет там продолжения))), мне просто надо чтоб после отправки, окно задерживалось, но вместо формы, на нем появлялось сообщение успешно отправлено и потом затухало!!!
                                                1. Игорь 26 мая 2016, 00:29 # 0
                                                  Извините за долгий ответ. Используйте Ajax Form. Его нужно будет только настроить под это.
                                                2. Виталий 04 мая 2016, 15:55 # 0
                                                  Вот лучше б вы тут похламили, у меня такая же проблема…
                                                  1. Игорь 04 мая 2016, 16:09 # 0
                                                    Проблема была в Denwer.
                                                    1. Виталий 04 мая 2016, 16:13 # 0
                                                      Я денвером не пользуюсь. Сразу в режиме онлайн делаю.
                                                      1. Игорь 04 мая 2016, 16:14 # 0
                                                        Давайте тогда разберёмся. Опишите свою проблему
                                                        1. Виталий 04 мая 2016, 16:21 # 0
                                                          Возможно неправильно подключил чанк. Вот код шаблона:

                                                          [[$header]]
                                                          [[*content]]
                                                          [[$modal]]
                                                          [[$footer]]
                                                          
                                                          Вот так выглядит код кнопки. Может быть в ней дело. Думаю, что-то другое надо писать вместо решётки, не пойму только, что…:
                                                          <a class="modal" href="#">Заказать</a>
                                                          1. Виталий 04 мая 2016, 16:22 # 0
                                                            Проблема собственно в том, что при нажатии на кнопку, ничего не происходит))
                                                            1. Игорь 04 мая 2016, 16:22 # 0
                                                              Скиньте пожалуйста ещё линк вашего сайта
                                                              1. Виталий 04 мая 2016, 16:25 # 0
                                                                colibrisolo.ru Сейчас пытаюсь поставить обратный звонок на первой «карточке» (разработка сайтов).
                                                                1. Игорь 04 мая 2016, 17:02 # 0
                                                                  Как освобожусь посмотрю и напишу вам.
                                                                  1. Виталий 04 мая 2016, 17:03 # 0
                                                                    Спасибо большое
                                                                    1. Игорь 04 мая 2016, 18:51(Комментарий был изменён) # 0
                                                                      У вас отсутствует
                                                                      <div id="overlay"></div><!-- Пoдлoжкa -->
                                                                      
                                                                      Из-за этого не работает. Внимательно прочитайте статью.
                                                                      1. Виталий 04 мая 2016, 21:53 # 0
                                                                        Точно. Спасибо. Теперь появляется, но сообщение на почту не приходит. Видимо я вообще полный чайник… Поможете? Вот код чанка:
                                                                        [[!FormIt?
                                                                           &hooks=`spam,email,redirect`
                                                                           &emailTpl=`modal-zv-tpl`
                                                                           &emailTo=`vital-dde@yandex.ru`
                                                                           &emailSubject=`Заказ обратного звонка`
                                                                           &redirectTo=`33`]]
                                                                        <div id="modal_form">
                                                                        	  <h2>Заказать звонок!</h2>
                                                                        	  <div class="comment">Оставьте Ваши данные и мы перезвоним Вам!</div>
                                                                              <a class="exit"></a>
                                                                        	  <form method="post">
                                                                                <input type="text" placeholder="Как вас зовут?" name="name-zv" id="name" class="input_text">
                                                                                <input type="text" placeholder="Контактный телефон *" name="phone-zv" id="phone-zv" class="phone-zv">
                                                                        		<div class="comment">Поля отмеченные <span class="required">*</span> обязательны для заполнения</div>
                                                                                <input class="button" type="submit" value="Перезвоните мне">
                                                                            </form>
                                                                        </div>
                                                                        <div id="overlay"></div><!-- Пoдлoжкa -->
                                                                        1. Игорь 04 мая 2016, 22:00 # 0
                                                                          Чанк modal-zv-tpl присутствует?
                                                                          1. Виталий 05 мая 2016, 09:48 # 0
                                                                            Прошу прощения за мой идиотизм. Письма приходили, просто в спам)
                                                                            1. уцвув 30 мая 2017, 11:36 # 0
                                                                              времени кучу потратил по сам не разобрался, автор блин, «молодец»…
                                                                            2. Кирилл 01 мая 2016, 17:18(Комментарий был изменён) # 0
                                                                              Я на почту отправил что тут не хламить
                                                                              1. Кирилл 01 мая 2016, 03:30 # 0
                                                                                Возможная проблема из-за denwera???
                                                                                1. Игорь 01 мая 2016, 09:16(Комментарий был изменён) # 0
                                                                                  Не думаю. Вы можете зайти в консоль и написать что за ошибки там? Чанк modal вы подключили?
                                                                                2. Кирилл 01 мая 2016, 01:54 # 0
                                                                                  <p><a href="#" class="modal">Звонок</a></p>
                                                                                  1. Кирилл 01 мая 2016, 01:50 # 0
                                                                                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> [[$meta]]     <script type="text/javascript" src="js/jquery.js"></script>     <script type="text/javascript" src="js/modal.js"></script> 	<script type="text/javascript" src="js/jquery.min.js"></script> 	<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>			 	<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>	 	<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>			 	<script type="text/javascript" src="js/jquery.bgslider.js"></script> 	<script type="text/javascript" src="js/preloader.js"></script> 	<script type="text/javascript" src="js/farbtastic.js"></script> 	<script type="text/javascript" src="js/basic.js"></script> 	<script type="text/javascript" src="js/styler.js"></script> 	<script type="text/javascript">		 	jQuery(document).ready(function(){ 		jQuery('#page').css({'display':'inline','width':'300px','overflow':'hidden','margin-right':'340px'}); 		jQuery('#sidebar').css({'margin-left':'326px'});	 	}); 	jQuery(window).load( 		function() {			 			jQuery('#hp_preloader').delay(800).animate({'opacity':'0'},1400,function(){ 				jQuery('#slider-nivo').nivoSlider({ 					controlNav:true, 					controlNavThumbs:false,			 					keyboardNav:false, 					pauseOnHover:false, 					prevText:'',			 					nextText:'', 					effect:'fade', 					animSpeed:300, 					pauseTime:4000 				}); 				jQuery(this).remove(); 				jQuery('#sidebar').delay(800).animate({'margin-left':'0px'},2100);		 				jQuery('#page').delay(800).animate({'margin-right':'0px','width':'666px'},2100);		 				 			});				 		} 	);			 	</script> </head> <body> 	<div id="hp_preloader"></div> 	[[$styler]] 	<div id="wrapper"> 		<div id="page"> 			<div id="content"> 				<div class="slider-nivo-holder"> 					<div id="slider-nivo"> 						[[!getImageList?                             &tvname=`slider`                             &tpl=`sliderTpl`                             &limit=`3`                             &docid=`[[*id]]`                         ]] 					</div> 				</div> 				<h3 style="text-align: center;">[[*rtext]]</h3> 				<div class="hr"></div> 				<ul> 					<blockquote class="align_left"><p>[[*introtext]]</p></blockquote> 				<p class="justify">[[*content]]</p> 				</ul>				 				<div class="hr2"></div> 				<div class="purchase_button"> 					<p>[[*description]]</p> 					<a href="[[~3]]" class="purchase_button-black">Посмотреть прайс</a> 				</div> 		        <div class="hr2"></div> 		        <p><a href="#" class="modal">Звонок</a></p> 		    </div>	 		</div> 		[[$sidebar]] 	</div> 	[[$background]] </body> </html>
                                                                                    1. Кирилл 01 мая 2016, 01:52 # 0
                                                                                      ссори не то всю страницу скинул
                                                                                    2. Кирилл 01 мая 2016, 01:37(Комментарий был изменён) # 0
                                                                                      ссылка такая звонок
                                                                                      1. Игорь 01 мая 2016, 01:39(Комментарий был изменён) # 0
                                                                                        Скиньте линк, посмотрю. Весь код оформляйте в
                                                                                        <code></code>
                                                                                        Я имею ввиду здесь на сайте
                                                                                      2. Кирилл 01 мая 2016, 01:37 # 0
                                                                                        Может я просто что-то не так сделал, но при нажатии на ссылку ничего не происходит
                                                                                        1. Кирилл 01 мая 2016, 01:09(Комментарий был изменён) # 0
                                                                                          Я в этом деле новичок, вроде сделал все как написано, но не могу сообразить что я должен прописать в шаблоне чтобы вызвать форму просто чанк [[$modal]] или что именно???
                                                                                          1. Кирилл 01 мая 2016, 01:26 # 0
                                                                                            т.е. другими словами, как мне указать ссылку, скажем как на демо (открыть окно), чтобы при нажатии форма всплывала???
                                                                                            1. Игорь 01 мая 2016, 01:31 # 0
                                                                                              В данном примере любую ссылку с классом modal
                                                                                              <a class="modal" href=""></a>
                                                                                            2. Илья Козлов 28 апреля 2016, 01:04 # 0
                                                                                              Большое спасибо за развёрнутый ответ и пояснения. По результату установки модального окна из Вашего примера, отпишусь Вам на ваш сайт.
                                                                                              1. Илья Козлов 28 апреля 2016, 00:57 # 0
                                                                                                Всё понятно, буду пробовать использовать Ваше решение так как моё, модальное окно prettyPopin — www.no-margin-for-errors.com/projects/prettypopin/, модальное окно, даже зелёный и красный стикеры jGrowl, не показывает, где -то происходит конфликт скриптов, решение не нашёл.
                                                                                                1. Игорь 28 апреля 2016, 01:01 # 0
                                                                                                  Хорошо, будут вопросы, спрашивайте.
                                                                                                2. Илья Козлов 28 апреля 2016, 00:49 # 0
                                                                                                  И последний вопрос, после удачного заполнения полей и «отсыла» кнопкой данных, форма проходит верификацию, появляется на зелёном фоне jGrowl сообщение об удачной доставке?
                                                                                                  1. Игорь 28 апреля 2016, 00:52 # 0
                                                                                                    Да, все правильно. jGrowl подключать не нужно, Ajax тоже, так как AjaxForm выполнит это сам.
                                                                                                  2. Илья Козлов 27 апреля 2016, 21:19 # 0
                                                                                                    Простите пожалуйста Игорь, обознался с именем, прошу прощения.
                                                                                                    1. Игорь 28 апреля 2016, 00:36 # 0
                                                                                                      Ничего страшного. После нажатия на кнопку отправить, при заполнении всех обязательных полей, моя форма очищается, чтобы повторно отправить, но не закрывается, это сделать легко. Код выше подходит для этого.
                                                                                                    2. Илья Козлов 27 апреля 2016, 14:07 # 0
                                                                                                      Добрый день. Не подскажете, а как Ваше данное решение интегрировать используя «обёртку» AjaxForm (автор, ник- «Безумкин»), для Formit, в исходном варианте заменив вызов Formit, на AjaxForm, в чанке, будет работать, как Вы думаете? Конфликтов с modal.js, не будет?
                                                                                                      1. Игорь 27 апреля 2016, 17:46 # 0
                                                                                                        Добрый день! Работать будет замечательно. Уже тестировал и использую на сайте, который создал. Нужно будет поправить код в чанке, который указали в &form.
                                                                                                        Вызов будет примерно такой:
                                                                                                        [[!AjaxForm?
                                                                                                           &snippet=`Formit`
                                                                                                           &hooks=`spam,email`
                                                                                                           &form=`tpl.AjaxForm`
                                                                                                           &emailTpl=`zv-tpl`
                                                                                                           &emailTo=`your@mail.ru`
                                                                                                           &emailSubject=`Заказ звонка с сайта`
                                                                                                           &validate=`phone-zv:required`
                                                                                                           &validationErrorMessage=`Пожалуйста, заполните поля помеченные *`
                                                                                                           &successMessage=`Сообщение успешно отправлено, наш менеджер свяжется с Вами в указанное время`
                                                                                                        ]]
                                                                                                        В данном случае чанк — tpl.AjaxForm:
                                                                                                        <form method="post" class="ajax_form af_example">
                                                                                                        <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>
                                                                                                        <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>
                                                                                                        1. Илья Козлов 27 апреля 2016, 21:17(Комментарий был изменён) # 0
                                                                                                          Игорь, подскажите пожалуйста, коли Ваш вариант, работает на AjaxForm (автор, ник- «Безумкин»), форма после заполнения полей и нажатия на кнопку «Отправить» уходит в down, закрывается автоматически модальное окно и более не перезагружается для ввода новых данных, срабатывает Ваш скрипт modal.js, ловит событие (af_complete)?:

                                                                                                          $(document).on('af_complete', function(event, response) {
                                                                                                          var form = response.form;
                                                                                                          // Если у формы определённый id
                                                                                                          if (form.attr('id') == 'my_form_3') {
                                                                                                          // Скрываем её!
                                                                                                          form.hide();
                                                                                                          }
                                                                                                          // Иначе печатаем в консоль весь ответ
                                                                                                          else {
                                                                                                          console.log(response)
                                                                                                          }
                                                                                                          });

                                                                                                          docs.modx.pro/components/ajaxform#Событие-af_complete
                                                                                                          1. Павел 02 сентября 2016, 11:33(Комментарий был изменён) # 0
                                                                                                            Добрый день. Подскажите, что куда прописать, что бы модальное окно после отправки закрывалось? У меня все успешно отправляется в верхнем правом углу что отправлено, а форма так и остается висеть.
                                                                                                            И еще один момент вчера сайту был открыт доступ и с утра 2000 сообщений с модального окна не заполненные в чем проблема подскажите? Сейчас вроде все проверки поправил но не знаю верно или нет.
                                                                                                            Сайт
                                                                                                            <div id="modal_form"><div class="comment">Оставьте Ваши данные и мы перезвоним Вам!</div>
                                                                                                            <a class="exit"></a>
                                                                                                            <form method="post" class="ajax_form af_example">
                                                                                                            <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>
                                                                                                            <input type="text" placeholder="Время для звонка?" name="time-zv" id="name" class="input_text">
                                                                                                            <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></div>
                                                                                                            1. Игорь 02 сентября 2016, 11:39 # 0
                                                                                                              У Вас Ajax form?
                                                                                                              1. Павел 02 сентября 2016, 12:33 # 0
                                                                                                                Точно не знаю :) запутался наверно да
                                                                                                                Сделал по коду приведенному выше (В данном случае чанк — tpl.AjaxForm:
                                                                                                                1. Игорь 02 сентября 2016, 12:43 # 0
                                                                                                                  На днях тогда сделаю статью про Ajax Form.
                                                                                                                  1. Павел 02 сентября 2016, 13:16 # 0
                                                                                                                    Отлично. Спасибо :) в этой статье ссылочку поставите?
                                                                                                                    1. Павел 02 сентября 2016, 16:24 # 0
                                                                                                                      Нарыл такое в modal.js добавил
                                                                                                                      function closeWindow() {
                                                                                                                      $('#modal_form').fadeOut(function() {
                                                                                                                      $(' a.close').remove();
                                                                                                                      }); //fade them both out
                                                                                                                      };
                                                                                                                      $('a.close, #fade').live('click', function() {closeWindow();});
                                                                                                                      а в кнопке (перезвоните)
                                                                                                                      onclick="closeWindow()"
                                                                                                                      Форма после отправки исчезает но остается затемненный экран после клика исчезает тоже, а вот на мобильном (андройд) не срабатыват.
                                                                                                                      1. Игорь 02 сентября 2016, 16:28 # 0
                                                                                                                        В Ajax Form есть событие af_complete. Вот на это событие нужно вешать обработчик. Через часик скину, ожидайте.
                                                                                                                        1. Игорь 02 сентября 2016, 21:24(Комментарий был изменён) # 0
                                                                                                                          Пока ещё не пробовал сам. Лучше статью напишу и протестирую. Ссылку в статью добавлю.
                                                                                                                          1. Павел 03 сентября 2016, 12:54 # 0
                                                                                                                            Добрый день. Заменил код в modal.js на тот который прислали, все работает окно сворачивается, только с мобильного нет, да и сворачивается не заполненная форма тоже. Буду ждать статью :) Спасибо.
                                                                                                                            1. Игорь 03 сентября 2016, 21:52 # 0
                                                                                                                              Привет! Вот ссылка на статью AjaxForm MODX