Модальное окно, функция BX.PopupWindow ()

Модальные окна, неотъемлемая часть современного интерфейса. Битрикс предоставляет мощный и гибкий JS-класс BX.PopupWindow для их создания и управления модальными окнами.

Базовое создание окна

Создадим кнопку, при клике на которую будет появлятся модальное окно:

<button id="show-popup-btn">Показать окно</button>

Подключим скрипт:

BX.ready(function() {
    var popupButton = BX('show-popup-btn');

    BX.bind(popupButton, 'click', function() {
        // создаем объект окна
        var myPopup = new BX.PopupWindow(
            // уникальный id DOM-элемента, в который будет обернуто окно. Если на странице будет 2 и больше окон такого плана, у каждого должен быть свой id
            'my_unique_popup_id',
            // параметр принадлежности окна к какому-либо DOM-элементу на странице. По дефолту окно всплывает в центре страницы. Хотите чтоб всплывало, рядом с какой-либо кнопкой, ставьте суда id элемента в виде BX('my_name_div')
            null,
            {
                // контентная часть
                content: '<div>Это контент моего первого всплывающего окна!</div>',
                // определяет, нужна ли вам иконка закрытия окна и ее положение
                closeIcon: {right: "20px", top: "10px"},
                // заголовок окна
                titleBar: 'Заголовок окна',
                // эти параметры указывают, что окно можно передвигать по странице
                zIndex: 0,
                offsetLeft: 0,
                offsetTop: 0,
                // разрешаем перетаскивание
                draggable: {restrict: true},
                // кнопки для управления содержимым окна. На каждую кнопку создаем новый объект new BX.PopupWindowButton с параметрами
                buttons: [
                    new BX.PopupWindowButton({
                        // текст кнопки
                        text: 'Закрыть',
                        // класс кнопки
                        className: 'popup-window-button-accept',
                        // событие для кнопки
                        events: {
                            click: function() {
                                // закрываем окно
                                this.popupWindow.close();
                            }
                        }
                    })
                ]
            }
        );

        // показываем окно
        myPopup.show();
    });
});

Управление окном

После создания объект окна можно получить через BX.WindowManager.Get() и управлять им:

// получаем ранее созданное окно по его ID
let existingPopup = BX.WindowManager.Get('my_unique_popup_id');

if (existingPopup) {
    // закрыть окно
    existingPopup.close();

    // изменить контент
    existingPopup.setContent('Новое содержимое!');

    // изменить заголовок
    existingPopup.setTitleBar('Новый заголовок');
}

Загрузка контента через AJAX

Часто контент для модального окна нужно подгружать с сервера. BX.PopupWindow отлично интегрируется с BX.ajax.

В этом примере по клику на кнопку создается пустое окно с надписью Загрузка…, отправляется AJAX запрос, и после получения ответа контент окна заменяется на HTML, пришедший с сервера:

BX.ready(function() {
    BX.bind(BX('load-data-btn'), 'click', function(e) {
        // получаем ID из data-атрибута кнопки
        let elementId = this.dataset.id;

        var popup = new BX.PopupWindow('ajax-popup', null, {
            // прелоадер
            content: 'Загрузка...',
            closeIcon: true,
            titleBar: 'Информация об элементе'
        });

        popup.show();

        // Ajax запрос в компонент
        BX.ajax.runAction('my.module:controller.action', {
            data: { id: elementId }
        }).then(function(response) {
            // вставляем полученный HTML в окно
            popup.setContent(response.data.html);
        }, function(response) {
            // в случае ошибки, выводим
            popup.setContent('Ошибка: ' + response.errors[0].message);
        });

        return BX.PreventDefault(e);
    });
});