Всплывающие окна в Битрикс: Создание и управление с помощью BX.PopupWindow

Всплывающие (модальные) окна — неотъемлемая часть современного интерфейса.

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

Шаг 1: Базовое создание окна

Для создания окна используется конструктор new BX.PopupWindow().

HTML разметка:

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

JavaScript (в script.js шаблона или компонента):

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

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

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

Ключевые параметры конструктора:

• id (первый параметр): Уникальный строковый идентификатор. Нужен для управления окном в дальнейшем.
• bindElement (второй параметр): DOM-элемент, относительно которого будет позиционироваться окно. Если null, окно появится по центру экрана.
• params (третий параметр): Объект с настройками:
  • content: HTML-содержимое окна.
  • titleBar: Заголовок окна.
  • closeIcon: Включает и позиционирует иконку закрытия (крестик).
  • buttons: Массив объектов BX.PopupWindowButton, описывающих кнопки.
  • draggable: Позволяет перетаскивать окно.
  • overlay: {backgroundColor: ‘black’, opacity: 50} — затемняет фон.

Шаг 2: Управление окном

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

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

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

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

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

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

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

BX.ready(function() {
    BX.bind(BX('load-data-btn'), 'click', function(e) {
        var elementId = this.dataset.id; // Получаем ID из data-атрибута кнопки
        
        var popup = new BX.PopupWindow('ajax-popup', null, {
            content: 'Загрузка...', // Прелоадер
            closeIcon: true,
            titleBar: 'Информация об элементе'
        });

        popup.show();

        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);
    });
});

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

Вывод:
BX.PopupWindow — это стандартный и очень мощный инструмент для создания модальных окон в Битрикс.

Он позволяет легко управлять контентом, кнопками и поведением окна, а также прекрасно интегрируется с AJAX-механизмами D7, что делает его незаменимым при разработке современных интерактивных интерфейсов.

BX.PopupWindow, Битрикс popup, модальное окно, BX.WindowManager, close, setContent, кнопки в popup, AJAX.