партнер компании 1с-битрикс
сайт фрилансера Сергея Эстрина
Войти как пользователь
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:
Простой адаптивный форум - модуль для битрикс
В данной статье я на небольших примерах покажу как использовать стандартные JavaScript классы CDialog и CAdminDialog для вывода модальных диалоговых popup окон а административной и публичной частях проекта на 1С-Битрикс.

Подключение скриптов для работы с диалоговыми окнами производится следующим образом:
CUtil::InitJSCore(array('window')); 
Диалоговое окно с подгрузкой страницы из url
var popup = new BX.CDialog({
   'title': 'Заголовок окна',
   'content_url': '/page.php',
   //   'content_post': this.JSParamsToPHP(arParams, 'PARAMS')+ '&' +
   //  this.JSParamsToPHP(arProp, 'PROP')+'&'+this.SESS,
   'draggable': true,
   'resizable': true,
   'buttons': [BX.CDialog.btnClose]
});

BX.addCustomEvent(popup, 'onWindowRegister',function(){  // событие возникает после открытия окна, но до его выравнивания
   console.log(this); // переменная this содержит объект окна
});

popup.Show();
Диалоговое окно с текстом:
var popup = new BX.CDialog({
   'title': 'Заголовок окна',
   'content': 'Текст внутри окна',
   'draggable': true,
   'resizable': true,
   'buttons': [BX.CDialog.btnClose]
});
         
popup.Show(); 
Стандартные кнопки "Сохранить" и "Отменить" (стандартная кнопка "Сохранить" подразумевает наличие формы внутри окна).
var popup = new BX.CDialog({
   'title': 'Заголовок окна',
   'content': 'Текст внутри окна',
   'draggable': true,
   'resizable': true,
   'buttons': [BX.CDialog.btnSave, BX.CDialog.btnCancel]
});
         
popup.Show();  
Кнопка "Сохранить" с собственным обработчиком (в данном примере по нажатию осуществляется вывод сообщения через alert и закрытие окна).
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, и если исходить из комментариев в коде js-библиотеки битрикс (/bitrix/js/main/core/core_window.js), класс CAdminDialog следует использовать в публичной части (хотя на деле он повсеместно используется в административной). Если же посмотреть в код, то CAdminDialog отличается от CDialog только css-классами некоторых элементов.

Функции для работы с уже созданными окнами

Следует заметить,что при закрытии окна, его объект не уничтожается, окно просто скрывается, и его можно опять открыть при помощи функции Show.

При этом с помощью других функций можно выполнять различные манипуляции над окнами, как скрытыми, так и открытыми:

Очистка всех кнопок
popup.ClearButtons(); 

Добавление кнопок
popup.SetButtons([BX.CDialog.btnSave, BX.CDialog.btnCancel]); 

Установка контента
popup.SetContent("html внутри окна"); 

Закрытие окна
popup.Close(); 

В некоторых случаях может потребоваться полное удаление окна (такой функции нет, но можно сделать так):
popup.DIV.parentNode.removeChild(popup.DIV);

События

Функции, реагирующие на различные события, связанные с диалоговыми окнами, можно зарегистрировать следующим образом:
BX.addCustomEvent(popup, 'onWindowRegister',function(){  
   console.log(this); // переменная this содержит объект окна
});
Список событий:
  • onWindowRegister
  • onWindowUnRegister(bool_clean)
  • onWindowError(arr_messages)
  • onBeforeWindowClose
  • onWindowClose(object)
  • onWindowResizeStart
  • onWindowResize
  • onWindowResizeFinished
  • onWindowResizeExt(arr_size)
  • onWindowExpand
  • onWindowNarrow
  • onWindowDragStart
  • onWindowDrag
  • onWindowDragFinished
  • onDynamicModeChange
  • onMenuOpenerMoved
  • onMenuOpenerUnhide

Чтобы оставить сообщение, авторизуйтесь, или войдите с помощью:
27.03.2014 15:37:30
BX.CDialog не работает в режиме правки если туда указать урл с компонентом?
27.03.2014 16:01:53
Если я правильно понял, вы создали отдельную страницу без хедера и футера, разместили там компонент и указали адрес этой страницы в content_url? Тогда да, наверно будут какие-то проблемы с режимом правки. Тогда вы можете указать у компонента array("HIDE_ICONS" => "Y"), это должно решить проблему (это ПЯТЫЙ параметр $APPLICATION->InclideComponent).
27.03.2014 16:13:31
Спасибо конечно.. но не помогает.. думаю там куча проблем возникнет... тот же компонент с fancybox например нормально работает
27.03.2014 19:04:08
Ну если вам для публички только, то да, фансибокс однозначно лучше. Эти окна имеет смысл использовать наверно только если не хочется подключать jquery по какой-то причине, например, в админке.
Главная   ·   Модули для 1С-Битрикс   ·   Типовые услуги   ·   Форум   ·   Блог   ·   Контакты
Рейтинг@Mail.ru