вход   

Модальное окно BX

весь список раздела "Шпаргалка"


Библиотека PopupWindowManager

Подключение библиотеки.

код php
CJSCore::Init(['popup']);

Настройки вывода модального окна.

код JS
// 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();
    });


Пример - popUp-окна средствами Битрикса