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

Больше статей и материалов по web-разработке в tg-канале - подписывайтесь!

Подписаться в telegram

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

  1. Дмитрий

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

  3. Nickolay

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

  4. iVariable

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

  7. op

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

  9. op

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

  10. Сергей

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

  11. Талгат

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

  13. Alexander Kozlov

    Алекс, подскажите, а можно ли в методе 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. Parviz

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

  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
    );?>

Добавить комментарий

Ваш адрес email не будет опубликован.