Попап окно с авторизацией Ajax

Примеры с кодом есть в пункте Классы и методы с примерами

Есть инструкции для некоторых готовых решений, например Аспро, Сотбит, 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>

Комопнент в попап (модальном) окне с загрузкой по AJAX

Бывают случаи когда не хочется на странице размещать компонент аторизации, в только кнпоку Авторизоваться. При клике по которой покажется попап окно с формой для авторизации. Для этого нужно немного иначе сделать чем в предыдущем варианте.

Для примера также используется оконая библиотека 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");
?>