К основному контенту

Разместить битрикс модуль в модальном окне



1) В header.php шаблона вставляем скрипт вызова формы
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/mari_scripts.js");// Скрипты для всплывающих окон

В месте, где кнопка вызова всплывающего окна:
<a href="#" id="loading"><?=GetMessage("H_SEND_MSG")?></a>
<div id="ajax-add-answer"></div> - контейнер для окна
<div class="background"></div> - фон под окном


2) Скрипт вызова модального окна средствами битрикса mari_scripts.js
BX.ready(function(){
var addAnswer = new BX.PopupWindow("my_answer", BX('search')/*/null /*Отобразить окно по центру*/, {
content: BX('ajax-add-answer'),
autoHide: true, //скрывать при клике вне окна
lightShadow : true,
overlay: {
backgroundColor: 'black', opacity: '70'
},
// width: 800,
// height: 600,
closeIcon: {right: "20px", top: "10px"},
titleBar: {content: BX.create("div", {html: '<h1>Экспресс заявка/вопрос</h1>', 'props': {'className': 'access-title-bar'}})},
zIndex: 0,
offsetLeft: 0,
offsetTop: 0,
draggable: {restrict: false},
// buttons: [
// new BX.PopupWindowButton({
// text: "Отправить",
// className: "popup-window-button-accept",
// events: {click: function(){
// BX.ajax.submit(BX("myForm"), function(data){ // отправка данных из формы с id="myForm" в файл из action="..."
// BX( 'ajax-add-answer').innerHTML = data;
// });
// }}
// }),
// new BX.PopupWindowButton({
// text: "Закрыть",
// className: "webform-button-link-cancel",
// events: {click: function(){
// this.popupWindow.close(); // закрытие окна
// }}
// })
// ]
});
$('#loading').click(function(){
BX.ajax.insertToNode('/include/modal_form_quest.php', BX('ajax-add-answer')); // функция ajax-загрузки контента из урла в #div
addAnswer.show(); // появление окна
});
$('#modalSubmit').click(function(){
$('#modalForm').hide();
});
});


3) modal_form_quest.php

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
<div>
Тут любой компонент битрикса, например форма
<?$APPLICATION->IncludeComponent("mari:main.feedback", "modal_form",
Array(
"USE_CAPTCHA" => "Y",
"OK_TEXT" => "Спасибо, ваше сообщение принято.",
"EMAIL_TO" => COption::GetOptionString('main','email_from'), //Берем емейл из настроек Главного модумя
"REQUIRED_FIELDS" => array(0 => "PHONE", 1 => "MESSAGE",),
"EVENT_MESSAGE_ID" => array('133'),
"AJAX_MODE" => "Y",
"AJAX_OPTION_SHADOW" => "N",
"AJAX_OPTION_JUMP" => "N",
"AJAX_OPTION_STYLE" => "Y",
"AJAX_OPTION_HISTORY" => "N",
"COMPONENT_TEMPLATE" => "modal_form",
"COMPOSITE_FRAME_MODE" => "A",
"COMPOSITE_FRAME_TYPE" => "AUTO",
),
false);
</div>










































Комментарии

Популярные сообщения из этого блога

Вызов php функции из js без перезагрузки страницы на примере "Подписки на новости"

1) Форма подписки на новости в footer.php < p class = "phead" > Будь первым! </ p > < p > Получай новости о новинках и акциях. </ p >< br > < input type = "text" name = "user_email_footer" id = "subscribe-email" value = " <?= ( $USER -> GetEmail ()<> '' )? $USER -> GetEmail (): '' ; ? > " > < input type = "submit" value = "Подписаться" id = "subscribe_btn" class = "btn btn_green" > 2) js обработка нажатия кнопки  id = "subscribe_btn" с валидацией введенного емейла //Валидация email адреса function validateEmail ( email ) { var re = / ^ (([^ <>()[ \]\\ .,;:\s@ \" ] + ( \. [^ <>()[ \]\\ .,;:\s@ \" ] + ) * ) | ( \" . +\" )) @ (( \[ [ 0-9 ] {1,3}\. [ 0-9 ] {1,3}\. [ 0-9 ] {1,3}\. [ 0-9 ] {1,3}\] ) | (([ a-zA-Z\-0-9 ] +\. ) + [ a...

Редирект на страницу раздела, если элемент не найден

При переезде сайта, при смене правил формирования url детальных страниц, может понадобиться перенаправление в случае 404 ошибки. В /bitrix/templates/ххххх/components/bitrix/catalog/catalog-template/element.php прописать: if ( 0 < $ElementID ){...} else localredirect ( '/catalog/' . $arResult [ 'VARIABLES' ][ 'SECTION_CODE' ]. '/' ); // Тут в соответствии с правилами формирования url каталога