Как сделать в битриксе всплывающее окно
Обновлено: 15.04.2024
Для тех кто хочет узнать как работают всплывающие окна на основе стандартной битриксовой библиотеки.
Сия библиотека полезна, когда лень подключать сторонние плагины и нужно быстро сваять окошко, не заморачиваясь с кастомизацией дизайна.
Что-то типа такого:
Начинается все с подключения самой библиотеки:
Пройдемся по параметрам:
my_answer - строка - уникальный id DOM-элемента, в который будет обернуто окно. Ежли на странице будет 2 и больше окон такого плана, то у каждого должен быть свой id.
closeIcon: - показывает нужна ли вам иконка закрытия окна и ее положение в окне.
titleBar: Это заголовок окна’, 'props': >)> - собссно это создание заголовка окна. BX .create - функция создания DOM-элемента. В данном случае создание . Если хотите чтоб ваше окно можно было перетаскивать по странице, то класс лучше не менять.
zIndex: 0,
offsetLeft: 0,
offsetTop: 0,
draggable: - эти параметры указывают, что окно можно передвигать по странице.
buttons - кнопки для управления содержимым окна. На каждую кнопку создаем новый объект new BX .PopupWindowButton с параметрами:
text - ‘название кнопки’
className - класс на кнопке, из стандартных возможны варианты: popup-window-button-accept - зеленая кнопка как на скрине, popup-window-button-cancel - белая кнопка, popup-window-button-link-cancel - просто ссылка. Само-собой можно приклеить свой стиль.
events: this.popupWindow .close();
>>
Это параметр, отвечающий за действие, произошедшее при нажатии кнопки. В данном случае this.popupWindow .close(); - говорит о закрытии окна. Но тут возможны различные варианты в зависимости от фантазии и задач. На пример, если в окне форма, можно сделать ajax-отправку контента через
Здесь BX ("myForm" - id-формы, data - данные, BX ( 'ajax-add-answer').innerHTML = data; - вставка ответа сервера в окно.
Либо можно сделать что-то свое в зависимости от нужд. Эта библиотека отлично работает в сочетании с jQuery, поэтому тут можно свободно использовать ее функции.
Далее приведу пример открытия окна по ссылке, загрузку в него ajax-конетнта и отправку формы.
Для тех кто хочет узнать как работают всплывающие окна на основе стандартной битриксовой библиотеки.
Сия библиотека полезна, когда лень подключать сторонние плагины и нужно быстро сваять окошко, не заморачиваясь с кастомизацией дизайна.
Что-то типа такого:
Начинается все с подключения самой библиотеки:
Пройдемся по параметрам:
my_answer - строка - уникальный id DOM-элемента, в который будет обернуто окно. Ежли на странице будет 2 и больше окон такого плана, то у каждого должен быть свой id.
closeIcon: - показывает нужна ли вам иконка закрытия окна и ее положение в окне.
titleBar: Это заголовок окна’, 'props': >)> - собссно это создание заголовка окна. BX .create - функция создания DOM-элемента. В данном случае создание . Если хотите чтоб ваше окно можно было перетаскивать по странице, то класс лучше не менять.
zIndex: 0,
offsetLeft: 0,
offsetTop: 0,
draggable: - эти параметры указывают, что окно можно передвигать по странице.
buttons - кнопки для управления содержимым окна. На каждую кнопку создаем новый объект new BX .PopupWindowButton с параметрами:
text - ‘название кнопки’
className - класс на кнопке, из стандартных возможны варианты: popup-window-button-accept - зеленая кнопка как на скрине, popup-window-button-cancel - белая кнопка, popup-window-button-link-cancel - просто ссылка. Само-собой можно приклеить свой стиль.
events: this.popupWindow .close();
>>
Это параметр, отвечающий за действие, произошедшее при нажатии кнопки. В данном случае this.popupWindow .close(); - говорит о закрытии окна. Но тут возможны различные варианты в зависимости от фантазии и задач. На пример, если в окне форма, можно сделать ajax-отправку контента через
Здесь BX ("myForm" - id-формы, data - данные, BX ( 'ajax-add-answer').innerHTML = data; - вставка ответа сервера в окно.
Либо можно сделать что-то свое в зависимости от нужд. Эта библиотека отлично работает в сочетании с jQuery, поэтому тут можно свободно использовать ее функции.
Далее приведу пример открытия окна по ссылке, загрузку в него ajax-конетнта и отправку формы.
В составе системы Битрикс есть замечательная библиотека, позволяющая создавать popup-окна на javascript. Именно с ее помощью появляются диалоги редактирования параметров компонента и редактирования страниц. Ниже я расскажу как использовать этот функционал в публичной части сайта.
Вот так выглядит стандартное всплывающее окно, которое можно получить на сайте:
Установка и настройка
Первым делом необходимо подключить ядро командой
Эту команду нужно выполнять только один раз — до операции создания окна.
Конструктор выглядит следующим образом (везде далее код javascript)
где
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 — сохранение, отмена и закрытие соответственно. Как правило, они используются в режиме загрузки кода из внешнего файла. Рассмотрение этого способа выходит за рамки статьи и описывать его не будем.
Существует еще один способ создания кнопок для всплывающего окна — с помощью метода
Параметром является массив кнопок, каждая из которых имеет свойства:
title — видимое название
id — идентификатор элемента
name — значение атрибута name
action — функция-обработчик нажатия
Итак, окно создано, все параметры заполнены, осталось показать его с помощью команды
Вот так, просто и быстро, можно создавать динамические popup-окна средствами 1с-Битрикс.
Эта статья посвящена одному из способов сделать в 1с-Битрикс форму в всплывающем окне. Достоинства метода:
- можно использовать любые формы 1с-Битрикс, которые выводятся компонентом. Например, добавление элемента инфоблока или веб-форма.
- всплывающее окно создается «на лету» при помощи javascript и изменяет свой размер в зависимости от количества контента внутри.
- весь процесс работы формы, вывода ошибок и результата происходит при помощи AJAX без перезагрузки окна.
Готовим javascript
Для создания всплывающих окон воспользуемся плагином jquery.fancybox. Подключаем его в шаблоне сайта или непосредственно на странице, где будет ссылка для вызова окна, предварительно скопировав содержимое архива на сайт (в примере это /js/fancybox/).
Готовим форму
Итак, скрипт вызова формы будет находиться в файле /ajax_popup.php — он упоминался в javascript-коде выше. Создаем этот файл как обычную страницу в 1с-Битрикс, кладем и настраиваем. на ней нужный компонент, при необходимости изменения внешнего вида копируем шаблон. В процессе настройки не забудьте поставить галочку на «Включить режим AJAX». Если ее нет, не отчаивайтесь, пропишем руками позже. Далее, открываем страницу на редактирование в режиме php и находим код вызова компонента. Сделать это просто, он всегда начинается с текста ‘IncludeComponent(‘ и заканчивается первой попавшейся ‘);?>’.
Все что выше этого куска кода заменяем на
Prolog_before.php подключит необходимые системе файлы без вывода шапки шаблона сайта, она в всплывающем окне не нужна. Скрипт ajax.js нужен для работы компонентов в режиме ajax.
Все что ниже подключения компонента заменяем на
Epilog_after.php подключит необходимые системе файлы без вывода подвала шаблона сайта.
Все, можно кликать на ссылку (которая на странице с javascript’ом и имеет класс «popup») и любоваться результатом:)
Если нет настройки «Включить режим AJAX»
Заставить работать в режиме AJAX можно практически любой компонент в системе. Если нет необходимой группы параметров в окне настроек, то можно поступить 2 способами — добавить нужные параметры в .parameters.php шаблона компонента (об этом можно почитать в документации), или вписать напрямую в код вызова строки:
Для тестового примера с iblock.element.form.add.form код с добавленными параметрами будет выглядеть так:
Указанным способом можно показывать не только формы, но и любой другой статический и динамический контент.
Практически в каждом проекте нам требуются различные js-библиотеки: от слайдеров и всплывающих окон, до сложных графиков.
Часто принимается решение использовать сторонние решения, но под капотом 1С-Битрикс припасено множество полезных функций.
amCharts
Подключать библиотеку необходимо в зависимости от типа графика:
amcharts - Базовая библиотека
amcharts_funnel – Воронка, пирамида Маслоу
amcharts_gauge – Диаграмма в виде спидометра
amcharts_pie – Круговая диаграмма
amcharts_radar – Радарная диаграмма
amcharts_serial – Обычные графики
amcharts_xy – График XY
Пример графика (serial)
MaskedInput
В Битриксе есть библиотека для указания масок ввода – masked_input , которая вполне может стать альтернативой jquery.maskedinput .
PhoneNumber
Хотя для масок телефонного номера лучше использовать библиотеку phone_number .
Пример работы библиотеки
PopupWindowManager
Всплывающие окна в Битриксе можно организовать с помощью BX.PopupWindowManager . Данная библиотека подходит, как для диалоговых окон, так и полноценных всплывающих страниц
Пример работы
PopupMenu
Выпадающие меню и списки в стиле Битрикс24 можно сделать с помощью PopupMenu .
Пример работы
SpotLight
Если необходимо привлечь внимание пользователя к элементу (например, инструкция по оформлению брони для новых менеджеров, или нужно уведомить о новом функционале) – с этим справится SpotLight .
Пример работы (да, круги будут анимированные)
ColorPicker
Если необходимо выбрать цвет на сайте – для этого есть ColorPicker
Пример работы
Списки
Чтобы сделать красивые выпадающие списки в стиле Битрикс24, необходимо правильно разметить html-верстку:
Минусы этого подхода – результаты селектов придется получать с помощью JavaScript .
Пример работы
Читайте также: