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

В составе системы Битрикс есть замечательная библиотека, позволяющая создавать popup-окна на javascript. Именно с ее помощью появляются диалоги редактирования параметров компонента и редактирования страниц. Ниже я расскажу как использовать этот функционал в публичной части сайта.

Вот так выглядит стандартное всплывающее окно, которое можно получить на сайте:

Установка и настройка

Первым делом необходимо подключить ядро командой

<?CUtil::InitJSCore(array('window'));?>

Эту команду нужно выполнять только один раз — до операции создания окна.

Конструктор выглядит следующим образом (везде далее код javascript)

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]
});

где
title — заголовок (на темно-синем фоне)
head — текст под заголовком, до формы
content — html-код формы с произвольными элементами. Переносы строк нужно обязательно предварять символом «\»
icon — имя класса, который будет навешен на блок с текстом head. Или можно указать путь к изображению-фону.
resizable — разрешить изменение размера окна (true|false)
draggable — разрешить перетаскивание мышью (true|false)
height — высота
width — ширина
buttons — массив, описывающий кнопки. Особенность кнопок в том, что они располагаются вне формы, т.е. стандартный «submit» без обработчика нажатия не сработает. В параметре можно использовать предустановленные кнопки BX.CDialog.btnSave, BX.CDialog.btnCancel, BX.CDialog.btnClose — сохранение, отмена и закрытие соответственно. Как правило, они используются в режиме загрузки кода из внешнего файла. Рассмотрение этого способа выходит за рамки статьи и описывать его не будем.

Существует еще один способ создания кнопок для всплывающего окна — с помощью метода

Dialog.SetButtons([
	{ 
		'title': 'Отправить', 
		'id': 'action_send', 
		'name': 'action_send', 
		'action': function(){ 
			document.getElementById('searchform').submit(); 
			this.parentWindow.Close(); 
		} 
	},
	{
		'title': 'Закрыть',
		'id': 'cancel',
		'name': 'cancel',
		'action': function(){
			this.parentWindow.Close();
		}
	}
]);

Параметром является массив кнопок, каждая из которых имеет свойства:
title — видимое название
id — идентификатор элемента
name — значение атрибута name
action — функция-обработчик нажатия

В качестве примера приведу несколько полезных команд, которые можно использовать в обработчике:
document.getElementById("formid").submit() — отправить форму с id="formid" методом, указанным в заголовке формы
this.parentWindow.Close() — закрыть всплывающее окно
BX.ajax.submit(BX("formid")) — отправить форму с id="formid" при помощи ajax-запроса.

Итак, окно создано, все параметры заполнены, осталось показать его с помощью команды

Dialog.Show();

Вот так, просто и быстро, можно создавать динамические popup-окна средствами 1с-Битрикс.

Если вам понравилась статья, подписывайтесь на обновления блога по rss или присоединяйтесь в twitter

Поделиться ссылкой с друзьями:

Метки: ,

Категории: Bitrix

Комментарии (19)

  1. Дмитрий:

    Дайте пожалуйста ссылку на рабочий пример

  2. Блог на wordpress, поэтому рабочий пример тут сделать затруднительно:)

  3. Nickolay:

    Есть косячок у окна в Chrome, а в IE6 разваливается верстка… в IE8 и Mozile без особых нареканий

  4. Спасибо еще раз. Опять полезный пост :)
    Зарелизюсь — обязательно дам на вас ссылку :)

  5. Спасибо, жду релиза:))

  6. op:

    куда ложить ?

  7. op:

    CUtil::InitJSCore(array(‘window’)); вот это куда ложить ?

  8. На страницу или в шаблон ДО создания окна

  9. op:

    просто в body или в head ?, где подключены все остальные js

  10. Сергей:

    Спасибо за статью!
    Не могли бы подсказать, как сделать что бы анимация в IE работала?
    сделал:
    content: »,
    в FF и Opere анимация работает а в IE нет :(

  11. Талгат:

    У меня возник такой вопрос: можно ли в данном классе менять содержимое контентной части окна, не закрывая самого окна?

  12. Талгат, с помощью javascript’a может и получится, не пробовал.

  13. Алекс, подскажите, а можно ли в методе dialog.setbuttons изменить внешний вид кнопки?
    ‘class’: ‘my_button’ — не прокатило :)

  14. Михаил:

    Согласен с Русланом
    >> После закрытия popup, заново не открывается, чтобы открыть нужно обновить страницу
    решения пока не нашел

  15. Михаил:

    Нашел решение — использовать
    var Dialog = new BX.CDialog({
    внутри функции по аналогии с ядром Bitrix
    function BCPProcessImport()
    {
    var Dialog = new BX.CDialog({

  16. Алекс:

    Это значит просто обернуть var Dialog = new BX.CDialog …
    в function BCPProcessImport??

  17. Подскажите плиз, как сделать чтобы окно выходило на этой же странице, при нажатии на ссылку?

  18. И еще можно задать position для окна?

  19. Денис:

    Доброго времени суток, Алексей!
    Окошко всплывает, всё замечательно!

    Но как в контент вставить php?
    Подскажите пожалуйста

    IncludeComponent(«bitrix:form.result.new», «order_form», array(
    «WEB_FORM_ID» => «1″,
    «IGNORE_CUSTOM_TEMPLATE» => «Y»,
    «USE_EXTENDED_ERRORS» => «Y»,
    «SEF_MODE» => «N»,
    «SEF_FOLDER» => «/»,
    «CACHE_TYPE» => «A»,
    «CACHE_TIME» => «3″,
    «LIST_URL» => «»,
    «EDIT_URL» => «»,
    «SUCCESS_URL» => «/bitrix/templates/rcs/output_gut.php»,
    «CHAIN_ITEM_TEXT» => «»,
    «CHAIN_ITEM_LINK» => «»,
    «VARIABLE_ALIASES» => array(
    «WEB_FORM_ID» => «WEB_FORM_ID»,
    «RESULT_ID» => «RESULT_ID»,
    )
    ),
    false
    );?>