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

Опубликовано 8 Авг 2010

В составе системы Битрикс есть замечательная библиотека, позволяющая создавать 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с-Битрикс.

Похожие записи

• Навигация вперед-назад в элементах инфоблока
• Исправляем ошибку MySQL «Row size too large» в 1с-Битрикс
• Автокэширование в 1с-Битрикс – сложно о простом
• Как сделать AJAX формы 1с-Битрикс в всплывающих окнах
• Битрикс 11 – большое обновление