Диалоговые окна в Битрикс

При разработке функционала в системе Битрикс рано или поздно возникает необходимость создания диалоговых окон. Реализовать это можно стандартными средствами системы. Для этих целей существуют стандартные классы битрикса на JavaScript, это CDialog и CAdminDialog. С помощью этих классов можно выводить диалоговые окна в публичной и административной части сайта.

Подключение скриптов диалоговых окон

Перед использованием диалоговых окон, их следует предварительно подключить в PHP коде. Подключение выполняется следующим образом:

CUtil::InitJSCore(array('window'));

После того как были подключены скрипты диалоговых окон, можно приступать к созданию объектов диалоговых окон на JavaScript.

Диалоговое окно с контентом отдельной страницы

При создании окна мы можем подгружать содержимое из отдельного скрипта. Это может оказаться удобным, когда нужно выполнять какую-либо дополнительную логику для работы диалогового окна.

var popup = new BX.CDialog({
    'title': 'Заголовок модального окна',
    'content_url': '/content.php',
    'draggable': true,
    'resizable': true,
    'buttons': [BX.CDialog.btnClose]
});
 
// событие после открытия окна (но до его выравнивания)
BX.addCustomEvent(popup, 'onWindowRegister',function(){
   console.log(this); // объект окна
});
 
// показ окна
popup.Show();

Для вывода простых текстовых сообщений можно выводить текст сообщения непосредственно через инициализацию самого окна.

Вывод текста в диалоговом окне

Для вывода текста в диалоговом окне, достаточно вместо ссылки в content указать текст сообщения. В остальном вызов окна принципиально схож с предыдущим примером.

var popup = new BX.CDialog({
    'title': 'Заголовок модального окна',
    'content': 'Текст сообщения модального окна',
    'draggable': true,
    'resizable': true,
    'buttons': [BX.CDialog.btnClose]
});
     
popup.Show();

Как в первом, так и во втором примере в buttons указываются объекты кнопок, которые будут отображаться в окне. В примерах выше это кнопка close – закрыть. Давайте попробуем вывести дополнительные кнопки типичные для окон.

Показ стандартных кнопок для диалоговых окон

Под стандартными кнопками диалоговых окон подразумеваются кнопки «Сохранить» или «Отменить».

var popup = new BX.CDialog({
    'title': 'Заголовок модального окна',
    'content': 'Контент внутри окна',
    'draggable': true,
    'resizable': true,
    'buttons': [BX.CDialog.btnSave, BX.CDialog.btnCancel]
});
 
popup.Show();

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

var btn_save = {
    title: BX.message('JS_CORE_WINDOW_SAVE'),
    id: 'savebtn',
    name: 'savebtn',
    className: BX.browser.IsIE() && BX.browser.IsDoctype() && !BX.browser.IsIE10() ? '' : 'adm-btn-save',
    action: function () {
        console.log(this.parentWindow); // объект родительского окна
        console.log(this.parentWindow.DIV); // DIV родительского окна
        this.parentWindow.Close();
    }
};
 
var popup = new BX.CDialog({
        'title': 'Заголовок модального окна',
        'content': 'Контент модального окна',
        'draggable': true,
        'resizable': true,
        'buttons': [btn_save, BX.CDialog.btnCancel]
    });
 
popup.Show();

CAdminDialog может быть инициализирован аналогичным образом в администраторской части. По сути он представляет из себя надстройку над классом CDialog, который так же может быть использован в администраторской части сайта.

popup.Show();

Так же по правилам работы с объектами в JavaScript, мы можем вносить изменения.

// убираем кнопки
popup.ClearButtons();
 
// добавляем кнопки
popup.SetButtons([BX.CDialog.btnSave, BX.CDialog.btnCancel]);
 
// закрываем окно
popup.Close();

События для диалоговых окон

В большинстве случаев, для окон могут потребоваться выполнять различные обработчики событий. При регистрации обработчика, он связывается с конкретным объектом диалогового окна.

BX.addCustomEvent(popup, 'onWindowRegister',function(){  
    console.log(this); // объект окна
});

В данном примере указано событие onWindowRegister, которое срабатывает при инициализации окна. На самом деле список событий довольно большой, и каждый из них может быть использован для конкретных случаев.

• onWindowRegister – событие при открытии окна;
• onWindowUnRegister(bool_clean) – событие при закрытии окна;
• onWindowError(arr_messages) – событие при появлении ошибки;
• onBeforeWindowClose – событие перед закрытием окна;
• onWindowClose(object) – событие после закрытия окна;
• onWindowResizeStart – событие перед началом изменения размера окна;
• onWindowResize – событие при изменении размера окна;
• onWindowResizeFinished – событие после окончания изменения размера окна;
• onWindowResizeExt(arr_size) – событие при изменения размера окна;
• onWindowExpand – событие при расширении окна;
• onWindowNarrow – событие при сужении окна;
• onWindowDragStart – событие перед началом перемещения окна;
• onWindowDrag – событие при перемещении окна;
• onWindowDragFinished – событие после перемещения окна;
• onDynamicModeChange – событие при динамическом изменении окна;
• onMenuOpenerMoved
• onMenuOpenerUnhide

Так к примеру, если необходимо выполнить какие-либо операции после закрытия окна, можно вместо onWindowRegister указать onWindowClose, и так далее. В администраторской части довольно часто используют CDialog вместо CAdminDialog, и связано это с тем, что какого-то принципиального отличия в этих классах нет.