Примеры с кодом есть в пункте Классы и методы с примерами
Есть инструкции для некоторых готовых решений, например Аспро, Сотбит, Intec
В случае елси вам не обходимо скрыть на странице блок с авторизацией и показывать в попап окне при необходимости, можно это сделать следующим образом. На странице размещается комопнент атворизации в скрытом блоке и на кнопку авторизоватсья подвешивается событие клика, при котором показывается модальное окно.
Для примера в качестве оконной библиотеке используется fancybox 3. Код ниже можно разместить в теле редктируемой страницы и протестировать. Аналогичный код размещен на демо странице.
Библиотека fancybox
должна быть подключена на странице после jquery
, и библиотека jquery
должна подключаться только 1 раз на странице, иначе все плагины подключенные до последней инициализации jquery
работать не будут
<div class="btn btn-default btn-success btn-small js-btn-show-auth-popup">Войти</div>
<div class="hidden" id="auth-popup" style="display:none;">
<div>
<? $APPLICATION->IncludeComponent('bxmaker:authuserphone.login', '', array()); ?>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.js-btn-show-auth-popup').on("click", function (e) {
e.preventDefault();
e.stopPropagation();
//для версии fancybox 3.0
$.fancybox.open($('#auth-popup'), {
loop: true,
gutter: 0,
closeBtn:false,
arrows: false,
keyboard: false,
infobar: false,
toolbar: false,
protect: false,
buttons: ['close'],
type: 'html',
smallBtn: false,
touch: false,
});
//для версии fancybox < 3.0
$.fancybox.open($('#auth-popup .bxmaker-authuserphone-login '), {
closeBtn:false,
touch: false,
});
});
})
</script>
<style type="text/css">
.fancybox-slide > div {
padding: 0;
background-color: transparent;
}
.bxmaker-authuserphone-login {
background-color: #fff !important;
}
</style>
Бывают случаи когда не хочется на странице размещать компонент аторизации, в только кнпоку Авторизоваться. При клике по которой покажется попап окно с формой для авторизации. Для этого нужно немного иначе сделать чем в предыдущем варианте.
Для примера также используется оконая библиотека fancybox 3.
В теле редактируемой страницы или в шаблоне сайта размещаем кнопку, стили и скрипты.
Библиотека fancybox
должна быть подключена на странице после jquery
, и библиотека jquery
должна подключаться только 1 раз на странице, иначе все плагины подключенные до последней инициализации jquery
работать не будут
<div class="btn btn-default btn-success btn-small js-btn-show-auth-popup-by-ajax">Войти</div>
<script type="text/javascript">
$(document).ready(function () {
$('.js-btn-show-auth-popup-by-ajax').on("click", function (e) {
e.preventDefault();
e.stopPropagation();
//для версии fancybox 3.0
$.fancybox.open({
loop: true,
gutter: 0,
closeBtn:false,
arrows: false,
keyboard: false,
infobar: false,
toolbar: false,
protect: false,
buttons: ['close'],
smallBtn: false,
touch: false,
type: 'ajax',
src: '/ajax/user/auth.php',
});
});
})
</script>
<style type="text/css">
.fancybox-slide > div {
padding: 0;
background-color: transparent;
}
.bxmaker-authuserphone-login {
background-color: #fff !important;
}
</style>
Делаем страницу для примера по пути относительно корня сайта - /ajax/user/auth.php
с содержимым (его нужно добавить не через редактор страниц а вручную загрузить или редактировать как текст через админку):
Для комопонента bxmaker:authuserphone.simple
:
<?
require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/modules/main/include/prolog_before.php");
\Bitrix\Main\UI\Extension::load('bxmaker.authuserphone');
echo \CJSCore::GetHTML(['bxmaker.authuserphone']);
?>
<div>
<? $APPLICATION->IncludeComponent('bxmaker:authuserphone.simple', '', array(
'COMPOSITE_FRAME_MODE' => 'N'
));
?>
</div>
<?
require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/modules/main/include/epilog_after.php");
?>
Для комопонента bxmaker:authuserphone.login
:
<?
require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/modules/main/include/prolog_before.php");
?>
<div>
<? $APPLICATION->IncludeComponent('bxmaker:authuserphone.login', '', array(
'COMPOSITE_FRAME_MODE' => 'N'
));
?>
</div>
<?php
\CJSCore::Init('main_user_consent');
echo \CJSCore::GetHTML(['main_user_consent']);
//это нужно обязательно чтобы подгрузились стили и срипты компонента
$css = \Bitrix\Main\Page\Asset::getInstance()->getCss();
$js = \Bitrix\Main\Page\Asset::getInstance()->getJs(\Bitrix\Main\Page\AssetShowTargetType::TEMPLATE_PAGE);
echo $css;
echo $js;
?>
<script type="text/javascript">
jQuery(document).ready(function () {
setTimeout(function(){
$('.bxmaker-authuserphone-login').each(function () {
new BXmakerAuthUserphone(jQuery(this), jQuery);
});
},600);
});
setTimeout(function () {
/* маска для номеров телефонов для шаблонов от аспро - РАСКОММЕНТИРОВТАЬ
if(arAsproOptions['THEME']['PHONE_MASK']){
$('input[name=phone]').inputmask('mask', {'mask': arAsproOptions['THEME']['PHONE_MASK']});
$('input[name=forgot_phone]').inputmask('mask', {'mask': arAsproOptions['THEME']['PHONE_MASK']});
$('input[name=register_phone]').inputmask('mask', {'mask': arAsproOptions['THEME']['PHONE_MASK']});
}
*/
}, 500);
</script>
<?
require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/modules/main/include/epilog_after.php");
?>
Для комопонента bxmaker:authuserphone.call
:
<?
require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/modules/main/include/prolog_before.php");
?>
<div>
<? $APPLICATION->IncludeComponent('bxmaker:authuserphone.call', '', array(
'COMPOSITE_FRAME_MODE' => 'N'
));
?>
</div>
<?php
\CJSCore::Init('main_user_consent');
echo \CJSCore::GetHTML(['main_user_consent']);
//это нужно обязательно чтобы подгрузились стили и срипты компонента
$css = \Bitrix\Main\Page\Asset::getInstance()->getCss();
$js = \Bitrix\Main\Page\Asset::getInstance()->getJs(\Bitrix\Main\Page\AssetShowTargetType::TEMPLATE_PAGE);
echo $css;
echo $js;
?>
<script type="text/javascript">
var box = $('.bxmaker-authuserphone-call');
var rand = box.attr('data-rand');
$('.bxmaker-authuserphone-call.inited').removeClass('inited');
if (!!window.BXmakerAuthUserphoneCall && !!window.BXmakerAuthUserphoneCall[rand]) {
delete window.BXmakerAuthUserphoneCall[rand];
}
setTimeout(function () {
BXmakerAuthUserphoneCallWorker();
/* маска для номеров телефонов для шаблонов от аспро - РАСКОММЕНТИРОВТАЬ
if(arAsproOptions['THEME']['PHONE_MASK']){
$('input[name=phone]').inputmask('mask', {'mask': arAsproOptions['THEME']['PHONE_MASK']});
$('input[name=forgot_phone]').inputmask('mask', {'mask': arAsproOptions['THEME']['PHONE_MASK']});
$('input[name=register_phone]').inputmask('mask', {'mask': arAsproOptions['THEME']['PHONE_MASK']});
}
*/
}, 500);
</script>
<?
require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/modules/main/include/epilog_after.php");
?>