Эта статья посвящена одному из способов сделать в 1с-Битрикс форму в всплывающем окне. Достоинства метода:
— можно использовать любые формы 1с-Битрикс, которые выводятся компонентом. Например, добавление элемента инфоблока или веб-форма.
— всплывающее окно создается «на лету» при помощи javascript и изменяет свой размер в зависимости от количества контента внутри.
— весь процесс работы формы, вывода ошибок и результата происходит при помощи AJAX без перезагрузки окна.

Готовим javascript

Для создания всплывающих окон воспользуемся плагином jquery.fancybox. Подключаем его в шаблоне сайта или непосредственно на странице, где будет ссылка для вызова окна, предварительно скопировав содержимое архива на сайт (в примере это /js/fancybox/).

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/js/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
$(function() {
    // ссылка для вызова окна должна иметь класс "popup"
    $('a.popup').fancybox({
        'overlayShow': false, // значения параметров можно посмотреть на сайте разработчика
        'padding': 0,
        'margin' : 0,
        'scrolling' : 'no',
        'titleShow': false,
        'type': 'ajax',
        'href': '/ajax_popup.php' // описание скрипта будет дано ниже по тексту:)
    });
});
</script>
<a class="popup" href="">Открыть окно</a>

Готовим форму

Итак, скрипт вызова формы будет находиться в файле /ajax_popup.php — он упоминался в javascript-коде выше. Создаем этот файл как обычную страницу в 1с-Битрикс, кладем и настраиваем!!! на ней нужный компонент, при необходимости изменения внешнего вида копируем шаблон. В процессе настройки не забудьте поставить галочку на «Включить режим AJAX». Если ее нет, не отчаивайтесь, пропишем руками позже. Далее, открываем страницу на редактирование в режиме php и находим код вызова компонента. Сделать это просто, он всегда начинается с текста ‘<?$APPLICATION->IncludeComponent(‘ и заканчивается первой попавшейся ‘);?>’.

Все что выше этого куска кода заменяем на

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
<script type="text/javascript" src="/bitrix/js/main/ajax.js"></script>

Prolog_before.php подключит необходимые системе файлы без вывода шапки шаблона сайта, она в всплывающем окне не нужна. Скрипт ajax.js нужен для работы компонентов в режиме ajax.

Все что ниже подключения компонента заменяем на

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/epilog_after.php");?>

Epilog_after.php подключит необходимые системе файлы без вывода подвала шаблона сайта.

Все, можно кликать на ссылку (которая на странице с javascript’ом и имеет класс «popup») и любоваться результатом:)

Если нет настройки «Включить режим AJAX»

Заставить работать в режиме AJAX можно практически любой компонент в системе. Если нет необходимой группы параметров в окне настроек, то можно поступить 2 способами — добавить нужные параметры в .parameters.php шаблона компонента (об этом можно почитать в документации), или вписать напрямую в код вызова строки:

"AJAX_MODE" => "Y",  // режим AJAX
"AJAX_OPTION_SHADOW" => "N", // затемнять область
"AJAX_OPTION_JUMP" => "N", // скроллить страницу до компонента
"AJAX_OPTION_STYLE" => "Y", // подключать стили
"AJAX_OPTION_HISTORY" => "N",

Для тестового примера с iblock.element.form.add.form код с добавленными параметрами будет выглядеть так:

<?$APPLICATION->IncludeComponent("bitrix:iblock.element.add.form", "", array(
    "IBLOCK_TYPE" => "catalog",
    "IBLOCK_ID" => "7",
    // ... куча свойств ...
    "CUSTOM_TITLE_DETAIL_PICTURE" => "",
    "AJAX_MODE" => "Y",  // режим AJAX
    "AJAX_OPTION_SHADOW" => "N", // затемнять область
    "AJAX_OPTION_JUMP" => "N", // скроллить страницу до компонента
    "AJAX_OPTION_STYLE" => "Y", // подключать стили
    "AJAX_OPTION_HISTORY" => "N",
    ),
    false
);?>

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

Больше статей и материалов по web-разработке в tg-канале - подписывайтесь!

Подписаться в telegram

35 комментариев “Как сделать AJAX формы 1с-Битрикс в всплывающих окнах”

  2. Павел

    точней перестает работать после submit формы

  3. Виктория

    Воспользовались вашей статьей, но никак не можем разобраться как сделать обработку формы в этом же окне все результаты обработки формы выводятся в файле — /ajax_popup.php. Как сделать обработку формы в этом же popup окне?
    Помогите разобраться.

  4. Алексей Валеев

    Виктория, я не совсем понял в чем проблема. В файле ajax_popup.php должен лежать компонент, который отвечает за вывод и обработку формы.

  5. Anga

    здравствуйте, спасибо большое за статью.
    Мне необходимо сделать авторизацию как на bitrix.ru, при нажатии на ссылку «войти» появляется всплывающее окно авторизации (делала, как описывается в вашей статье), а вот при нажатии на иконки соц. сервисов, которые находятся в всплывающем окне, новое всплывающее окно с авторизацией через соц. сервисы прячется за первым и является не активным. Как это можно исправить?

  6. Алексей

    Работал с компонентом system.auth.form написал как в статье, добавил поддержку Ajax в параметры компонента. но все при нажатии любой кнопки в компоненте (выход.выход.напомнить пароль) — загружается новое окно с одним этим единтвенным компонентом

  8. Алексей

    Какие нибудь изменения с компонентом system.auth.form кроме включение Ajax — производились?

  11. Алексей Валеев

    В компоненте ничего не менял, шаблон стандартный. Вот тестовый юзер на моем сайте — логин test, пасс testtest
    Содержимое файла:
    <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
    <script type="text/javascript" src="/bitrix/js/main/ajax.js"></script>
    <?$APPLICATION->IncludeComponent("bitrix:system.auth.form", ".default", array(
    "AJAX_MODE" => "Y", // режим AJAX
    "SHOW_ERRORS" => "Y",
    "AJAX_OPTION_SHADOW" => "N", // затемнять область
    "AJAX_OPTION_JUMP" => "N", // скроллить страницу до компонента
    "AJAX_OPTION_STYLE" => "Y", // подключать стили
    "AJAX_OPTION_HISTORY" => "N",
    ),
    false
    );?><?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/epilog_after.php");?>

  12. Алексей

    Перепроверил все еще что раз
    при входе — будь то правильный пароль или не правильный — открывается новое окно
    при выходе работает правильно
    Может это связано с каким то еще библиотеками. Шаблон используется самописный

  13. Алексей

    Столкнулся с той же проблемой, только использовал комплексный компонент голосований, результат голосования открывался не в диалог окне а на новой странице. Я решил просто подключить свой аякс, соответствено в компоненте отключил все что связано с аяксом битрикса, а так же сам скипт /bitrix/js/main/ajax.js. Далее в шаблоне компонента, который открывается первым в модальном окне (в моем случае voiting.form), после первой строки с подключением пролога добавил стандартный doctype, здесь подключил все нужные файлы для fancybox включая мой собственный аякс и в конце закрыл .
    Весь код выводящий конвент в шаблоне поместил в обертку
    Скрипт с аяксом выглядел так:
    $(document).ready(function() {
    ……
    $(«form#voiting-form»).bind(«submit», function() {
    $.ajax({
    type : «POST»,
    cache : false,
    url : «voiting.php»,
    data : $(this).serializeArray(),
    success: function(html) {
    $(«div.voting-form-box-wrapper»).html(html);
    }
    });
    return false;
    });
    …..
    });
    voiting.php — тот файл, где вызывается комплексный компонент голосования. В результате все стало выводиться в одном модальном окне. Сделать автоматически регулируемый размер не удалось, поэтому просто задал ширину и высоту окна с нормальным запасом.

  14. Алексей

    Теги не вывелись в предыдущем комменте, суть в том чтобы прописать свой header в шаблоне doctype, html, head, body

  15. Andy

    Доброго дня!
    Все сделал как у Вас в примере, мне нужно две вебформы разместить. Все открывается правильно но проблема в следующем:

    Если открыть один раз окно с вебформой, она аяксом открывается в fancybox и нормально общается с сервером асинхронно: без перегрузки страницы выдает все нужные ответы (типа не заполнено такое поле…)
    теперь если без перезагрузки закрыть одну и открыть другую форму, то она на при сабмите перекидывает на страницу ‘/ajax_popup.php’ — никакого аякса уже нету.

    Еще раз 1 раз работает, потом закрыть — открыть вторую — не работает!

    В чем может быть проблема?

    пока сделал, чо при клике на closebutton в fancybox’е происходит обновление страницы…

  16. Mityai

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

  17. Дэни

    Алексей Валеев, подскажите, а как можно реализовать передачу переменных в форму.
    Допустим есть страница с компонентом catalog:section (список товаров) и при нажатии «купить» появляется всплывающая форма. Как в эту форму передать наименование и цену товара?
    Делал по Вашему примеру. Спасибо

  18. Дэни

    сделал. в header.php шаблона записал
    форма.

    А в ссылку добавил
    <a href="#clickbuy" class="popup" onclick="document.getElementById('nameEl').innerHTML='’;
    document.getElementById(‘priceEl’).innerHTML=»;
    title=»Купить в 1 клик» rel=»nofollow»>Купить в 1 клик

  20. Алий

    Вывел через fancybox свой компонент формы

    IncludeComponent(«demo:main.feedback», «.default», array(
    «USE_CAPTCHA» => «Y»,
    «OK_TEXT» => «Спасибо, ваше сообщение принято.»,
    «EXT_FIELDS» => array(
    0 => «Телефон»,
    1 => «»,
    ),
    «EMAIL_TO» => «askunash@gmail.com»,
    «REQUIRED_FIELDS» => array(
    0 => «NAME»,
    1 => «EMAIL»,
    2 => «MESSAGE»,
    ),
    «EVENT_MESSAGE_ID» => array(
    0 => «36»,
    )
    ),
    false
    );?>

    Все сделал как в статье, хорошо, работает попап окошко. Вот только проблема небольшая обнаружилась.
    На странице компонента почтовое событие срабатывает, а через попап окошко почему-то не работает.
    Никто не сталкивался? Может кто помочь?

  21. Сергей

    Спасибо. Очень интересно.
    Подскажите пожалуйста, как реализовать в компоненте контроллер, так, чтобы я мог обращаться к
    /ajax_popup.php/edit/forma1
    /ajax_popup.php/edit/forma2
    …?

  23. Олег

    Подскажите, пожалуйста.
    У меня всё время пишет ‘элемент не найден’.
    Где в ссылке или в компоненте указать передачу id в файл ajax_popup?

  24. Евгений

    Добрый день сделал все по инструкции в результате нечего не сработало просто при нажатие на кнопку перезагружает эту же страницу в чем может быть ошибка?

  25. Иван

    Огромное спасибо! все отлично работает! ваша статья очень помогла!

  26. Виталий

    Ребят, подскажите, где я туплю.
    Я взял стандартный компонент авторизации(system.auth.form).

    Когда авторизован, при нажатии на кнопку «Выход» — выходит без перезагрузки, всё отлично(ошибок в консоле никаких), а когда я пытаюсь авторизоваться, то меня перебрасывает на другую страницу и показывает что я авторизован. При этом в консоле выдаётся вот такая ошибка:

    Uncaught TypeError: Object [object global] has no method ‘BX’

    Подскажите пожалуйста что сделать надо, чтобы всё заработало?

    P.s. Делаю всё на голом Bitrix. никаких изменений вообще нигде не делал.

  27. Виталий

    Ну неужели никто помочь не сможет? Очень прошу!

  28. Алексей

    Виталий, у меня была аналогичная проблема. Мне помог ответ Алексея от 10.02.2012 в 05:34

  29. Dmitry

    Скажите пожалуйста, добавил на форму компонент обратной связи. Как сделать так, что бы после отправки письма форма закрывалась?

  30. Олек

    Странно, ничего не выходит. Открывается новая страница с формой и все. Может версия БУС влияет? редакция стандарт 12.5.10

  31. Елена

    Сделала все по инструкции, компонент bitrix:iblock.element.add.form
    Почему-то при возникновении ошибки компонент работает в режиме аякс, а при успешной отправке формы перенаправляется на файл ajax.php. Так и должно быть? Как исправить, чтобы сообщение об успешной отправке работало аяксом?

  32. Илья

    кто нибудь смог реализовать, так чтобы размер окна менялся, если в форме появляется например аларм о том что какое-то обязательное поле не заполнено и соответственно высота всей формы увеличивается ? Как это сделать? Поделитесь пожалуйста. Делать запас по высоте, как пишет коммент, вообще не вариант, не красиво это.

  33. Ольга

    Скажите, а как сделать, чтобы в popup окне открывалось только сообщение об отправке формы? Т.е., сама форма расположена на обычной странице. При нажатии на кнопку отправить появляется popup-окно с сообщением: «Спасибо! Ваша заявкая принята» (или что-то подобное) без перезагрузки страницы

  34. Антон

    Можно обойтись без js:

  35. Антон

    a data-fancybox data-type=»ajax» data-src=»/ajax/order.php»

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

Ваш адрес email не будет опубликован.