Форма обратной связи в модальном окне на css-modals

Сегодня сделаем форму обратной связи в модальном (всплывающем) окне с помощью CSS Modals на AJAX.

В последних обновлениях модуля Форма обратной связи + конструктор форм я сделал возможность подключать jQuery-плагин модального окна CSS Modals отдельной опцией, что дает возможность даже без копирования шаблона сделать любую форму в модальном окне.

К сожалению, внедрить в шаблон популярные плагины модальных окон нет пока возможности, т.к. при аякс-запросах полностью перезагружается верстка шаблона, т.е. вся разметка и модальное окно опять открывается и выглядит это некрасиво, мерцает как бы окно, а в моем варианте все будет ровно и красиво без мерцаний.

Итак, что нужно сделать по шагам:

  1. Сначала в настройках компонента  обратной связи в разделе jQuery-плагины нужно включить CSS Modal и включить режим AJAX.
  2. Затем мы разберемся с компонентом обратной связи, обернем его разметкой модального окна в файле footer.php шаблона сайта.
  3. Затем в любом места сайта сделаем кнопку, по которой и будем вызывать это модальное окно формы, которое будет доступно абсолютно на всех страницах сайта.

Код вызова модального окна формы обратной связи

Итак, включаем плагин CSS Modal в настройках компонента:
Включаем плагин CSS Modal в настройках компонента обратной связи

Обязательно включаем режим AJAX (форма будет работать без перезагрузки страницы):
Обязательно включаем режим AJAX (форма будет работать без перезагрузки страницы)

Теперь нам нужна разметка модального окна, можете взять ее со страницы плагина CSS Modals в блоке Markup, но у меня стили в модуле применены для немного другой разметки, в место html5-тегов header и footer я применил в модуле стили для блоков div с классами modal-header и modal-footer, но работать будет любой вариант.

<div class="modal--show" id="modal-feedback" tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true">
    <div class="modal-inner">
        <div class="modal-header"><!-- Header --></div>
        <div class="modal-content"><!-- The modals content --></div>
        <div class="modal-footer"><!-- Footer --></div>
    </div>
    <a href="#!" class="modal-close" title="Закрыть" data-close="Close" data-dismiss="modal">?</a>
</div>

А теперь остается заполнить три блока нужными нам данными:
modal-header - тут заголовок формы.
modal-content - тут php-код вызова компонента обратной связи.
modal-footer -  тут текст под формой, можно опустить, если не нужен.

Это полностью итоговый код разметки модального окна:

<div class="modal--show" id="modal-feedback" tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true">
    <div class="modal-inner">
        <div class="modal-header">Обратная связь</div>
        <div class="modal-content">
            <?$APPLICATION->IncludeComponent(
                "api:main.feedback",
                ".default",
                array(
                    "COMPONENT_TEMPLATE" => ".default",
                    "IBLOCK_TYPE" => "catalog",
                    "IBLOCK_ID" => "",
                    "INSTALL_IBLOCK" => "N",
                    "IBLOCK_ELEMENT_ACTIVE" => "N",
                    "DISABLE_SEND_MAIL" => "N",
                    "REPLACE_FIELD_FROM" => "Y",
                    "UNIQUE_FORM_ID" => "5513128184581",
                    "OK_TEXT" => "Спасибо, ваше сообщение принято!",
                    "EMAIL_TO" => "support@tuning-soft.ru",
                    "REDIRECT_PAGE" => "",
                    "DISPLAY_FIELDS" => array(
                        0 => "AUTHOR_NAME",
                        1 => "AUTHOR_EMAIL",
                        2 => "AUTHOR_MESSAGE",
                    ),
                    "REQUIRED_FIELDS" => array(
                        0 => "AUTHOR_NAME",
                        1 => "AUTHOR_EMAIL",
                        2 => "AUTHOR_MESSAGE",
                    ),
                    "CUSTOM_FIELDS" => array(
                    ),
                    "ADMIN_EVENT_MESSAGE_ID" => array(
                        0 => "29",
                    ),
                    "USER_EVENT_MESSAGE_ID" => array(
                        0 => "30",
                    ),
                    "HIDE_FIELD_NAME" => "N",
                    "FIELD_SIZE" => "default",
                    "TITLE_DISPLAY" => "N",
                    "FORM_TITLE" => "Обратная связь",
                    "FORM_TITLE_LEVEL" => "2",
                    "DEFAULT_OPTION_TEXT" => "-- Выбрать --",
                    "FORM_SUBMIT_CLASS" => "uk-button",
                    "FORM_SUBMIT_VALUE" => "Отправить",
                    "BUTTON_TEXT_BEFORE" => "",
                    "FORM_TEXT_BEFORE" => "",
                    "FORM_TEXT_AFTER" => "",
                    "TEMPLATE_STYLE" => "uikit",
                    "USE_HIDDEN_PROTECTION" => "Y",
                    "USE_CAPTCHA" => "N",
                    "INCLUDE_JQUERY" => "N",
                    "INCLUDE_PLACEHOLDER" => "Y",
                    "INCLUDE_AUTOSIZE" => "N",
                    "INCLUDE_FORM_STYLER" => "Y",
                    "HIDE_FORM_AFTER_SEND" => "N",
                    "SCROLL_TO_FORM_IF_MESSAGES" => "Y",
                    "SCROLL_TO_FORM_SPEED" => "1000",
                    "INCLUDE_VALIDATION" => "N",
                    "BRANCH_ACTIVE" => "N",
                    "SHOW_FILES" => "N",
                    "UUID_LENGTH" => "10",
                    "UUID_PREFIX" => "",
                    "USE_YM_GOALS" => "N",
                    "AJAX_MODE" => "Y",
                    "AJAX_OPTION_JUMP" => "N",
                    "AJAX_OPTION_STYLE" => "Y",
                    "AJAX_OPTION_HISTORY" => "N",
                    "USER_AUTHOR_FIO" => "",
                    "USER_AUTHOR_NAME" => "",
                    "USER_AUTHOR_LAST_NAME" => "",
                    "USER_AUTHOR_SECOND_NAME" => "",
                    "USER_AUTHOR_EMAIL" => "",
                    "USER_AUTHOR_PERSONAL_MOBILE" => "",
                    "USER_AUTHOR_WORK_COMPANY" => "",
                    "USER_AUTHOR_POSITION" => "",
                    "USER_AUTHOR_PROFESSION" => "",
                    "USER_AUTHOR_STATE" => "",
                    "USER_AUTHOR_CITY" => "",
                    "USER_AUTHOR_WORK_CITY" => "",
                    "USER_AUTHOR_STREET" => "",
                    "USER_AUTHOR_ADRESS" => "",
                    "USER_AUTHOR_PERSONAL_PHONE" => "",
                    "USER_AUTHOR_WORK_PHONE" => "",
                    "USER_AUTHOR_FAX" => "",
                    "USER_AUTHOR_MAILBOX" => "",
                    "USER_AUTHOR_WORK_MAILBOX" => "",
                    "USER_AUTHOR_SKYPE" => "",
                    "USER_AUTHOR_ICQ" => "",
                    "USER_AUTHOR_WWW" => "",
                    "USER_AUTHOR_WORK_WWW" => "",
                    "USER_AUTHOR_MESSAGE_THEME" => "",
                    "USER_AUTHOR_MESSAGE" => "",
                    "USER_AUTHOR_NOTES" => "",
                    "SHOW_CSS_MODAL_AFTER_SEND" => "N",
                    "CSS_MODAL_HEADER" => "Расширенная форма обратной связи",
                    "CSS_MODAL_CONTENT" => "Модуль <b>Расширенная форма обратной связи битрикс с вложением</b> предназначен для отправки сообщений с сайта.<br>Отличается от стандартной формы Битрикс - отправкой файлов вложениями или ссылками на файл, скрытой защитой от спама, работой нескольких форм на одной странице, встроенным валидатором форм, красивым шаблоном, очень функциональным конструктором форм и мн. другими функциями, которые очень необходимы на каждом сайте.",
                    "CSS_MODAL_FOOTER" => "&copy; Антон Кучковский, Тюнинг-Софт",
                    "SUBJECT" => "",
                    "PAGE_URI" => "",
                    "PAGE_URL" => "",
                    "PAGE_TITLE" => "",
                    "DIR_URL" => "",
                    "DATETIME" => "",
                    "DELETE_FILES_AFTER_UPLOAD" => "N",
                    "SEND_ATTACHMENT" => "Y",
                    "SET_ATTACHMENT_REQUIRED" => "N",
                    "COUNT_INPUT_FILE" => "3",
                    "FILE_DESCRIPTION" => "",
                    "MAX_FILE_SIZE" => "10000",
                    "SHOW_ATTACHMENT_EXTENSIONS" => "N",
                    "FILE_EXTENSIONS" => "txt, rtf, doc, docx, xls, xlsx, ods, odt, jpg, jpeg, bmp, png",
                    "UPLOAD_FOLDER" => "/upload/feedback",
                    "CHOOSE_FILE_TEXT" => "выбрать файл",
                    "INCLUDE_CSSMODAL" => "Y"
                ),
                false
            );?>
        </div>
        <div  class="modal-footer">&copy; Антон Кучковский, Тюнинг-Софт</div>
    </div>
    <a href="#!" class="modal-close" title="Закрыть" data-close="Close" data-dismiss="modal">?</a>
</div>

который Вам необходимо добавить в конце файла footer.php шаблона сайта, он по этому пути:

bitrix/templates/имя шаблона сайта/footer.php

Кстати, параметры компонента Вы сможете изменять двойным кликом  по форме, когда модальное окно видимое, с этим все в порядке.
Если на сайте будет несколько форм, то обратите внимание, в коде вызова задан ID-модального окна id="modal-feedback", вот его и нужно будет  менять в каждом коде вызова модального окна.
ID - это уникальный идентификатор, на всей странице он должен быть уникальным, единственным, т.е. у второй формы будет что-то такое id="modal-callback" и т.д.

Кнопка вызова модального окна

Итак, модальное окно у нас готово полностью, остается понять, как его вызывать, как к нему обращаться.
Вызывается модальное окно практически в любом jQuery-плагине одинаково, таким способом:

<a href="#modal-feedback" class="uk-button">Обратная связь</a>

Т.е. в атрибуте href="" ссылки необходимо указать идентификатор формы с хешем #, как на якорь в странице и модальное окно начнет открываться.

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

Заключение

Наглядно выглядеть это будет вот так, это наша кнопка:
Кнопка вызова модального окна

А это форма уже в модальном окне:
Форма обратной связи в модальном (всплывающем) окне на CSS Modals

Надеюсь это Вам поможет, будут вопросы, оставляйте комментарии, покупайте модуль, он реально клевый и очень гибкий в умелых руках;)
Установка модуля