Блог Николая

Всплывающие окна штатными средствами Битрикс

 var addAnswer = new BX.PopupWindow(
         "my_answer",                
          null, 
         {
            content: BX( 'ajax-add-answer'),
            closeIcon: {right: "20px", top: "10px" },
            titleBar: {content: BX.create("span", {html: '<b>Это заголовок окна</b>', 'props': {'className': 'access-title-bar'}})}, 
            zIndex: 0,
            offsetLeft: 0,
            offsetTop: 0,
            draggable: {restrict: false},
            buttons: [
               new BX.PopupWindowButton({
                  text: "Сохранить" ,
                  className: "popup-window-button-accept" ,
                  events: {click: function(){
                     this.popupWindow.close();
                  }}
               }),
               new BX.PopupWindowButton({
                  text: "Закрыть" ,
                  className: "webform-button-link-cancel" ,
                  events: {click: function(){
                     this.popupWindow.close();
                  }}
               })
            ]
         });

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

 $arDialogParams = array(
      'title' => $arUrl['PARAMS']['title'],
      'content' => $arUrl['PARAMS']['content'],
      'width' => $arUrl['PARAMS']['width'],
      'height' => $arUrl['PARAMS']['height'],
   );
   $href = '(new BX .CDialog('.CUtil::PhpToJsObject($arDialogParams).')).Show()';

Параметры

  • resizable
  • draggable
  • content_post
  • title
  • titleBar
  • head
  • content
  • icon
  • resize_id
  • buttons : []
  • width
  • height
  • overlay
  • closeIcon: {
    // объект со стилями для иконки закрытия, при null — иконки не будет
    opacity: 1
    }
  • zIndex: 950
  • offsetLeft: 0
  • offsetTop: 0
  • titleBar: ‘Заголовок окна’
  • closeByEsc: true, // закрытие окна по esc
  • darkMode: false, // окно будет светлым или темным
  • autoHide: false, // закрытие при клике вне окна
  • draggable: true, // можно двигать или нет
  • resizable: true, // можно ресайзить
  • min_height: 100, // минимальная высота окна
  • min_width: 100, // минимальная ширина окна
  • lightShadow: true, // использовать светлую тень у окна
  • angle: true, // появится уголок
var Dialog = new BX.CDialog({
	title: "Заголовок окна",
	head: 'Текст до формы',
	content: '<form method="POST" style="overflow:hidden;" action="/search/" id="searchform">\
		<textarea name="search" style="height: 78px; width: 374px;">Ищем много текста</textarea>\
		</form>',
	icon: 'head-block',

	resizable: true,
	draggable: true,
	height: '168',
	width: '400',
	buttons: ['<input type="submit" value="test" />', BX.CDialog.btnSave, BX.CDialog.btnCancel, BX.CDialog.btnClose]
});

предустановленные кнопки BX.CDialog.btnSave, BX.CDialog.btnCancel, BX.CDialog.btnClose

Николай