Ajax форма во всплывающем окне Битрикс

В большинстве случаев, почти на любом сайте используется форма обратной связи, заказа звонка, оформления заказа или ещё чего-нибудь. И конечно же, лучше всего, если такая форма будет работать без перезагрузки страницы, то есть в ajax-режиме.

Сейчас мы и рассмотрим вариант, как сделать форму на ajax, да ещё и во всплывающем окне. Мы не будем использовать сторонние плагины, например fancyBox или ещё что-то. Сделаем всё обычным js-скриптом с использованием jQuery.

Итак, для начала давайте создадим файл, например form.php, в котором разместим стандартный компонент формы обратной связи bitrix:main.feedback. К параметрам компонента мы добавим вот такие строки, которые зададут компоненту ajax-режим.

"AJAX_MODE" => "Y",
"AJAX_OPTION_SHADOW" => "N",
"AJAX_OPTION_JUMP" => "N",
"AJAX_OPTION_STYLE" => "Y",
"AJAX_OPTION_HISTORY" => "N",

Кроме этого, в нашем файле мы подключим служебные части пролога и эпилога, а так же обернем наш компонент формы в html-конструкцию (для реализации всплывающей формы).

Файл form.php должен получиться примерно таким:

<?
// подключение служебной части пролога
require_once($_SERVER['DOCUMENT_ROOT'] . "/bitrix/modules/main/include/prolog_before.php");?>

<div class="modal_background">
	<div class="modal_form">
		<a href="#" class="close_form">Закрыть форму</a>
		<?$APPLICATION->IncludeComponent(
			"bitrix:main.feedback",
			"",
			Array(
				"EMAIL_TO" => "test@test.ru",
				"EVENT_MESSAGE_ID" => array("7"),
				"OK_TEXT" => "Спасибо, ваше сообщение принято.",
				"REQUIRED_FIELDS" => array("NAME", "EMAIL", "MESSAGE"),
				"USE_CAPTCHA" => "Y",
				"AJAX_MODE" => "Y",
				"AJAX_OPTION_SHADOW" => "N",
				"AJAX_OPTION_JUMP" => "N",
				"AJAX_OPTION_STYLE" => "Y",
				"AJAX_OPTION_HISTORY" => "N",
			)
		);?>
	</div>
</div>

<?
// подключение визуальной части пролога
require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/modules/main/include/epilog_after.php");?>

Теперь добавим немного CSS для всплывающей формы. Вставьте этот код в ваш CSS-файл.

/*это затемнение экрана при вызове формы*/
.modal_background{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(0,0,0,0.6);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/*это контейнер самой формы*/
.modal_form{
    background: #ffffff;
    border-radius: 2px;
    width: 500px;
    padding: 40px 30px;
    position: relative;
    display: none;
    max-width: 100%;
}
/*это кнопка для закрытия формы*/
a.close_form{
    position: absolute;
    right: 30px;
    top: 40px;
    z-index: 5;
}

И остаётся добавить скрипт, который будет вызывать нашу форму. Скрипт вешаем на событие нажатия кнопки. Допустим, что наша кнопка это тег <a>  с классом call_form. То есть выглядеть это будет так:

$(function() {
    // вызываем форму
    $(document).on("click", ".call_form", function(e) {
    	e.preventDefault();// отменяем переход по ссылке

    	var this_ = $(this);
    	if(this_.hasClass("disabled"))
    		return false;
        
        this_.addClass("disabled");

        $.ajax({
            url: "/include/form.php",
            type: "POST",
            data: {},
            success: function(data) {
            	$("body").append(data);
            	$(".modal_background").css({"display":"flex"});
            	$(".modal_form").fadeIn();
        	this_.removeClass("disabled");
            }
        });
    });

    // а это для закрытия формы
    $(document).on("click", ".close_form", function(e) {
        e.preventDefault();
        $(".modal_background").hide().remove();
    });
});

Что здесь происходит? Сперва мы делаем ajax-запрос на файл с нашей формой. Получаем нашу форму и вставляем её в конец страницы. Затем показываем наше затемнение экрана и только после, плавно выводим форму.

Обратите внимание, что для показа затемнения экрана я использовал display: flex. Это нужно, чтобы наша форма была по центру экрана.

На этом всё. Форма будет работать в ajax-режиме.