BX.PopupWindowManager

BX.PopupWindowManager - обертка над BX.PopupWindow. Имеет две особенности в использовании:

Повторный вызов метода create - вернет уже существующий объект.
Открытие диалога, автоматически закрывает другой открытый диалог, созданный через BX.PopupWindowManager.

Метод	Описание	С версии
create(uniquePopupId, bindElement, params)	Создает диалог. Точно также как и BX.PopupMenu.
isPopupExists(uniquePopupId)	Проверяет существование диалога.
getCurrentPopup()	Получает текущий диалог.

Пример

var popup = BX.PopupWindowManager.create("popup-message", null, {
	content: "Hello World!",
	darkMode: true,
	autoHide: true
});

popup.show();

Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.

0 Андрей Чурсин 22.11.2023 11:31:42 Сообщение не промодерировано, возможны ошибки и неточности.
для лоадера в окне (пока грузится контент) можно вставить старенький спиннер content: '<div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div>',

Адель Юсупов 11.07.2022 14:24:28

Сообщение не промодерировано, возможны ошибки и неточности.

Код

<?php

CJSCore::Init(['popup']);
?>

<sc ript>
    // BX.element - элемент, к которому будет привязано окно, если null – окно появится по центру экрана

    BX.ready(function () {
        var popup = BX.PopupWindowManager.create("popup-message", BX('element'), {
            content: 'Контент, отображаемый в теле окна',
            width: 400, // ширина окна
            height: 100, // высота окна
            zIndex: 100, // z-index
            closeIcon: {
                // объект со стилями для иконки закрытия, при null - иконки не будет
                opacity: 1
            },
            titleBar: 'Заголовок окна',
            closeByEsc: true, // закрытие окна по esc
            darkMode: false, // окно будет светлым или темным
            autoHide: false, // закрытие при клике вне окна
            draggable: true, // можно двигать или нет
            resizable: true, // можно ресайзить
            min_height: 100, // минимальная высота окна
            min_width: 100, // минимальная ширина окна
            lightShadow: true, // использовать светлую тень у окна
            angle: true, // появится уголок
            overlay: {
                // объект со стилями фона
                backgroundColor: 'black',
                opacity: 500
            }, 
            buttons: [
                new BX.PopupWindowButton({
                    text: 'Сохранить', // текст кнопки
                    id: 'save-btn', // идентификатор
                    className: 'ui-btn ui-btn-success', // доп. классы
                    events: {
                      click: function() {
                          // Событие при клике на кнопку
                      }
                    }
                }),
                new BX.PopupWindowButton({
                    text: 'Копировать',
                    id: 'copy-btn',
                    className: 'ui-btn ui-btn-primary',
                    events: {
                      click: function() {

                      }
                    }
                })
            ],
            events: {
               onPopupShow: function() {
                  // Событие при показе окна
               },
               onPopupClose: function() {
                  // Событие при закрытии окна                
               }
            }
        });

        popup.show();
    });
</sc ript>

Наверх