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

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.btnSaveBX.CDialog.btnCancel]
});
         
popup.Show();
Кнопка "Сохранить" с собственным обработчиком (в данном примере по нажатию осуществляется вывод сообщения через alert и закрытие окна).

var btn_save = {

   
titleBX.message('JS_CORE_WINDOW_SAVE'),
   
id'savebtn',
   
name'savebtn',
   
classNameBX.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_saveBX.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.btnSaveBX.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 по какой-то причине, например, в админке.