Всплывающее окно Bitrix и родная js библиотека

Bitrix имеет огромное количество модулей и компонентов. В арсенале имеется даже своя реализация jQuery или точнее ее аналог. Очень мощный и интересный инструмент, но, к сожалению, не очень хорошо документированный. Приведу небольшой пример как быстро сделать всплывающее окно методами такой библиотеки: В некоторых случаях возможно потребуется явное подключения CJSCore::Init(['popup']);в header.php вашего шаблона. Создадим контейнер, в который поместим то, что должно быть во всплывающем окне, я использовал форму регистрации, но это может быть что угодно.

<div id="bx_popup_form" style="display:none; padding:10px;min-height: 300px" class="bx_login_popup_form">
   Содержимое всплывающего окна
</div>

Скрипт вызова окна, примерно, следующий:

<script>
    function openFormPopup()
    {
        var authPopup = BX.PopupWindowManager.create("FormPopup", null, {
            autoHide: true,
            offsetLeft: 0,
            offsetTop: 0,
            overlay : true,
            draggable: {restrict:true},
            closeByEsc: true,
            closeIcon: { right : "12px", top : "10px"},
            content: '<div style="width:400px;height:400px; text-align: center;"><span style="position:absolute;left:50%; top:50%"><img src="/bitrix/templates/eshop_adapt_yellow/img/wait.gif"/></span></div>',
            events: {
                onAfterPopupShow: function()
                {
                    this.setContent(BX("bx_recall_popup_form"));
                }
            }
        });

        authPopup.show();
    }
</script>

На кнопку вызова «всплывашки» вешаем событие клика с вызовом этой функции:

<a href="javascript:void(0)" onclick="openFormPopup()" class="recall">Вызов формы</a>

Кнопки для такой «всплывашки» можно добавить такой конструкцией:

buttons: [
    new BX.PopupWindowButton({
        text: "Сохранить" ,
        className: "popup-window-button-accept" ,
        events: {click: function(){
                this.popupWindow.close();
            }}
    }),
    new BX.PopupWindowButton({
        text: "Закрыть" ,
        className: "webform-button-link-cancel" ,
        events: {click: function(){
                this.popupWindow.close();
            }}
    })
],

BX - это и есть тот аналог $ из jQuery. Библиотека очень большая. Если по изучать, то можно делать интересные вещи и применять в своих компонентах и решениях.