Хочу рассказать о моем способе решения задачи с авторизацией в модальном окне (Битрикс). Перерыв кучу ссылок, так и не нашел более-менее изящного подхода, поэтому предлагаю вам свой велосипед.
Для начала создадим страничку, которая будет отдавать формы авторизации/регистрации/забытого пароля по параметру в адресной строке.
Итак, выделяем целый раздел /auth/
/auth/index.php
Коротко об $APPLICATION->AuthForm — мы получаем отдельные компоненты по параметру в url. Напримерт /auth/?register=yes — выведет нам форму регистрации.
Дальше нам нужны модальные окна, для этого воспользуемся библиотекой Битрикс, а также нужен jquery
Теперь js. Все методы я завернул в один объект
Дальше необходимо кастомизировать шаблоны компонентов:
system.auth.authorize
system.auth.forgotpasswd
system.auth.registration
Все ссылки приводим к виду
и соответственно нам необходим метод для перехода между формами auth.set
Все input[type=submit] превращаем в input[type=hidden]
и вставляем ссылки для сабмита форма:
При желании можно обернуть в компонент и подключать в шаблоне сайта.
Для начала создадим страничку, которая будет отдавать формы авторизации/регистрации/забытого пароля по параметру в адресной строке.
Итак, выделяем целый раздел /auth/
/auth/index.php
require $_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php";
$APPLICATION->AuthForm('', false, false);
Коротко об $APPLICATION->AuthForm — мы получаем отдельные компоненты по параметру в url. Напримерт /auth/?register=yes — выведет нам форму регистрации.
Дальше нам нужны модальные окна, для этого воспользуемся библиотекой Битрикс, а также нужен jquery
CJSCore::Init("popup", "jquery");
Теперь js. Все методы я завернул в один объект
var auth = {
popup: null, //наш popup
showPopup: function(url) {
this.popup = BX.PopupWindowManager.create("modal_auth", '', {
closeIcon: true,
autoHide: true,
offsetLeft: 0,
offsetTop: 0,
overlay : false,
draggable: {restrict:true},
closeByEsc: true,
content: auth.getForm(url), //получаем контент из другого метода
overlay: {backgroundColor: 'black', opacity: '10' },
events: {
onPopupClose: function(PopupWindow) {
PopupWindow.destroy(); //удаление из DOM-дерева после закрытия
}
}
});
this.popup.show();
},
getForm: function(url) { //отдаем форму по запросу
var content = null;
$.ajax({
url: url,
method: "GET",
async: false,
success: function (data) {
content = data;
}
});
return content;
}
}
Дальше необходимо кастомизировать шаблоны компонентов:
system.auth.authorize
system.auth.forgotpasswd
system.auth.registration
Все ссылки приводим к виду
<a href="#" onclick="auth.set('/auth/?forgot_password=yes')" rel="nofollow"><b>Забыли свой пароль?</b></a>
и соответственно нам необходим метод для перехода между формами auth.set
set: function(url) {
var form = auth.getForm(url);
auth.popup.setContent(form); //заменим текущий контент модального окна
auth.popup.adjustPosition(); //отцентруем
}
Все input[type=submit] превращаем в input[type=hidden]
и вставляем ссылки для сабмита форма:
<a href="#" onclick="auth.submit('/auth/', '.b-authorize')">Войти</a>
submit: function(url, form) {
$.post(url, $(form).serialize()).done(function(data) { //заберем все поля формы и запросим контент
auth.popup.setContent(data); //заменяем контент модального окна
});
}
При желании можно обернуть в компонент и подключать в шаблоне сайта.