Ajax Popup на Bitrix JS

Очень часто на сайтах необходим функционал всплывающих окон. Это может быть сообщение об успешном добавлении товара, всплывающая форма обратной связи, покупка в один клик и т.д. Часто вижу самописные всплывашки, иногда fancybox и ему подобные. В один момент мне надоело изобретать каждый раз велосипед. Т.к. работаем с Bitrix, то можно всплывающим окном из стандартной js библиотеки Битрикс.

Таким образом подключаются необходимые js скрипты:

<?CJSCore::Init(array("popup"));?>

А вот само использование BX.PopupWindowManager:

function showAjaxPopup(url) {
    var hashCode = function (s) {
        return s.split("").reduce(function(a,b){a=((a<<5)-a)+b.charCodeAt(0);return a&a},0);
    };
    var link = url;

    var ajaxPopup = BX.PopupWindowManager.create("ajaxPopup" + hashCode(url.toString()), null, {
        autoHide: true,
        offsetLeft: 0,
        offsetTop: 0,
        overlay: true,
        draggable: true,
        closeByEsc: true,
        closeIcon: {right: "0px", top: "0px"},
        content: '<svg class="lds-spinner" width="200px"  height="200px"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background: none;"><g transform="rotate(0 50 50)">\n' +
            '  <rect x="47" y="22" rx="9.4" ry="4.4" width="6" height="16" fill="#28292f">\n' +
            '    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>\n' +
            '  </rect>\n' +
            '</g><g transform="rotate(30 50 50)">\n' +
            '  <rect x="47" y="22" rx="9.4" ry="4.4" width="6" height="16" fill="#28292f">\n' +
            '    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"></animate>\n' +
            '  </rect>\n' +
            '</g><g transform="rotate(60 50 50)">\n' +
            '  <rect x="47" y="22" rx="9.4" ry="4.4" width="6" height="16" fill="#28292f">\n' +
            '    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>\n' +
            '  </rect>\n' +
            '</g><g transform="rotate(90 50 50)">\n' +
            '  <rect x="47" y="22" rx="9.4" ry="4.4" width="6" height="16" fill="#28292f">\n' +
            '    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate>\n' +
            '  </rect>\n' +
            '</g><g transform="rotate(120 50 50)">\n' +
            '  <rect x="47" y="22" rx="9.4" ry="4.4" width="6" height="16" fill="#28292f">\n' +
            '    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"></animate>\n' +
            '  </rect>\n' +
            '</g><g transform="rotate(150 50 50)">\n' +
            '  <rect x="47" y="22" rx="9.4" ry="4.4" width="6" height="16" fill="#28292f">\n' +
            '    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>\n' +
            '  </rect>\n' +
            '</g><g transform="rotate(180 50 50)">\n' +
            '  <rect x="47" y="22" rx="9.4" ry="4.4" width="6" height="16" fill="#28292f">\n' +
            '    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"></animate>\n' +
            '  </rect>\n' +
            '</g><g transform="rotate(210 50 50)">\n' +
            '  <rect x="47" y="22" rx="9.4" ry="4.4" width="6" height="16" fill="#28292f">\n' +
            '    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate>\n' +
            '  </rect>\n' +
            '</g><g transform="rotate(240 50 50)">\n' +
            '  <rect x="47" y="22" rx="9.4" ry="4.4" width="6" height="16" fill="#28292f">\n' +
            '    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>\n' +
            '  </rect>\n' +
            '</g><g transform="rotate(270 50 50)">\n' +
            '  <rect x="47" y="22" rx="9.4" ry="4.4" width="6" height="16" fill="#28292f">\n' +
            '    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"></animate>\n' +
            '  </rect>\n' +
            '</g><g transform="rotate(300 50 50)">\n' +
            '  <rect x="47" y="22" rx="9.4" ry="4.4" width="6" height="16" fill="#28292f">\n' +
            '    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"></animate>\n' +
            '  </rect>\n' +
            '</g><g transform="rotate(330 50 50)">\n' +
            '  <rect x="47" y="22" rx="9.4" ry="4.4" width="6" height="16" fill="#28292f">\n' +
            '    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>\n' +
            '  </rect>\n' +
            '</g></svg>',
        events: {
            onAfterPopupShow: function () {
                BX.ajax.post(
                    link,
                    {},
                    BX.delegate(
                        function (result) {
                            ajaxPopup.adjustPosition();
                            ajaxPopup.resizeOverlay();

                            this.setContent(result);
                        },
                        this
                    )
                );
            }
        }
    });
    ajaxPopup.show();
}

jQuery(document).ready(function ($) {
    $(document).on('click', '.js-ajax-popup', function (event) {
        event.preventDefault();

        if ($(this).data("url").length > 0) {
            showAjaxPopup($(this).data("url"));
        }
    });
});

Теперь если нам где то в коде понадобиться вывести кнопку или ссылку, при нажатии на которую должен открыться popup, нужно всего лишь добавить такому элементу класс js-ajax-popup и аттрибут data-url="/ajax/sample.php". Как то так:

<span class="js-ajax-popup" data-url="/ajax/sample.php">Записаться</a>
	

Получить текущий открытый popup можно так

var popup = BX.PopupWindowManager.getCurrentPopup();
popup.close();//а вот так можно его закрыть.

//А вот так можно его отцентрировать
popup.adjustPosition();
popup.resizeOverlay();