Как сделать в битриксе всплывающее окно

Обновлено: 17.05.2024

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

Все это я делаю на 1С-Битрикс версии 14.9. При поиске решений, мне было не понятно работает это сейчас или нет, поэтому я указываю версию. Редакция Малый Бизнес.

В шаблоне для интернет магазина(например, eshop_adapt_yellow), форма входа выводится во всплывающем, модальном окне. Я воспользовался этим же способом.
Выведем в окне форму обратного звонка. Для этого, нужно создать форму. Это будет описано в другой статье.
У меня, кнопка обратного звонка находится в шапке, поэтому в header.php шаблона, вставляем код вызова нашей формы, обернутый div, и ниже скрипт вызова окна

Вот и все, теперь на кнопку или ссылку вешаем вызов этой функции, вот так

Есть еще способы вызвать окно, это воспользоваться, например fanсybox. Нашел это решение на этом форуме. Если это будет нужно я напишу отдельную статью, и в ней повторю этот способ, пишите.

И еще один способ, вызвать модальное окно встроенное в битрикс, используемое для админки. Вот тут рассказано как это сделать, я проверял на свежей версии, все работает.

Всплывающее popUp меню средствами Битрикс. В сообществе Битрикс уже рассказывали тему про модальное.

В сообществе Битрикс уже рассказывали тему про модальное popup окно. Иногда нужно реализовать простое всплывающее меню как представлено ниже.

Сейчас поговорим о том, как его вывести.

Всплывающее окно с формой обратной связи Битрикс

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

Создание формы обратной связи

Более или менее простой способ - это создать страницу с контактной информацией и вывести на нее компонент "Форма обратной связи" как на картинке:

Далее переходим в режим "Редактирование исходного кода" и обворачиваем вывод компонента в div контейнер как в примере (можете просто скопировать отсюда к себе на страницу):

ВАЖНО! - не забудьте поменять мой электроящик на свой.

Добавляем в style.css шаблона вот такие стили:

-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;

-webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;

И переносим нашу форму в footer.php шаблона сайта, в самый низ до закрытия тега body:

Небольшая фенька.

Можно принудительно "нажимать" на ссылку вызывающую окно через определенный промежуток времени. Для этого достаточно добавить в шаблон сайта вот такой скрипт:

Цифрой 5000 можно выставить время выполнения клика после открытия страницы с оной, в миллисекундах .

popUp-окна средствами Битрикса

Для тех кто хочет узнать как работают всплывающие окна на основе стандартной битриксовой библиотеки.

Сия библиотека полезна, когда лень подключать сторонние плагины и нужно быстро сваять окошко, не заморачиваясь с кастомизацией дизайна.

Что-то типа такого:

Начинается все с подключения самой библиотеки:

Далее создадим объект:

Пройдемся по параметрам:
my_answer - строка - уникальный id DOM-элемента, в который будет обернуто окно. Ежли на странице будет 2 и больше окон такого плана, то у каждого должен быть свой id.

closeIcon: - показывает нужна ли вам иконка закрытия окна и ее положение в окне.

titleBar: Это заголовок окна’, 'props': >)> - собссно это создание заголовка окна. BX .create - функция создания DOM-элемента. В данном случае создание <span заголовок окна</span>. Если хотите чтоб ваше окно можно было перетаскивать по странице, то класс лучше не менять.

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 окно стандартной bx библиотекой в карточке лида?

Любая подобная модификация является изменением функциональной части системы, т.е. при любом обновлении необходимо будет проверять не сломалось ли чего.

Как можно притворить это решение в жизнь?

1) Кастомизировать шаблон компонента bitrix:crm.lead и поместить код в details.php
Плюсы:
- Мнимальное изменение
- Шаблон меняется очень редко

Минусы:
- Придется поддерживать до конца проекта при любом обновлении

2) Кастомизировать шаблон компонента bitrix:crm.lead.details

Плюсы:
- Незначительное изменение
- Частично можно опираться на поля лида

Минусы:
- Придется поддерживать до конца проекта при любом обновлении

3) Делать это через JS.
На событии эпилога подключать библиотеку, которая будет проверять нужную страницу и выводить popup

Плюсы:
- Не влияет на обновления

Минусы:
- Не просто в разработке (требует глубоких знаний платформы)
- Будет сложнее поддерживать, если битрикс будет менять апи/чпу

Как добавить модальное окно на сайт bitrix?

Есть сайт, работающий на CMS Bitrix. Мне нужно, чтобы при открытии определённой страницы каталога открывалось модальное окно с предупреждением. Но не приходит в голову, как это сделать. Почему-то когда нажимаю в этом каталоге "Изменить страницу с помощью PHP" ничего не происходит. То есть я добавляю код, но результата нет.

Битрикс тут каким местом? меняй файлы по ftp sneeskaa @sneeskaa Автор вопроса PetrPo, Где и что менять?

Мне нужно, чтобы при открытии определённой страницы каталога. когда нажимаю в этом каталоге "Изменить страницу с помощью PHP" ничего не происходит

В этом каталоге и меняй, только по ftp, понимаешь? sneeskaa @sneeskaa Автор вопроса

PetrPo, Да, но разве у каждого каталога есть своя страница? Разве там ни так, что catalog с кодом одна страница, а остальные выводятся просто по шаблону?

Если у каждой страницы с каталогом есть своя страница с кодом, то где её найти?

з.ы. сори, если туплю, я только начал учить битрикс.

sneeskaa, эээ, ну тогда я не понимаю. Что в твоем понимании есть каталог? Каталог, как физическая папка или каталог как, ну допустим Каталог товаров? sneeskaa @sneeskaa Автор вопроса sneeskaa, Ну тут по уму надо делать, раз уж ты битрикс используешь, не тупо в код зашивать. Вдруг тебе завтра ноутбуки отключить надо будет и сделать пылесосы. Или выводить и в ноутбуках и в пылесосах, наверняка разный текст, картинка и прочее будут.
Тебе как рассказать, как по тупому сделать или чтобы гибко можно было делать? Гибко, нужны знания api битрикса. В реале работы на пару часов. sneeskaa @sneeskaa Автор вопроса

Открываешь файл по ftp, пишешь там

Смотришь, там у тебя будет или SECTION_ID или SECTION_CODE - это id и символьный код твоего раздела, соответственно.
Вставляешь проверку, что если это значение равно твоим ноутбукам, то выводить твой попап.
Каким js-ом ты будешь попап делать я не знаю, тут уже знания битрикса не нужны.

sneeskaa @sneeskaa Автор вопроса

PetrPo, То ли я дурак, то ли лыжи не едут. Файл каталога я нашёл сразу, но что даёт этот код

ID раздела тоже нашёл в настройках, но как организовать проверку?

п.с. обязательно подключаться по фтп? Битрикс же позволяет редактировать файлы прямо из админки

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

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

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

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

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

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

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

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

Всплывающие окна PRO

Модуль «Всплывающие окна PRO» позволяет создавать на вашем сайте неограниченное число всплывающих окон разного типа и под разные условия срабатывания. Это универсальный модуль, который в настоящий момент поддерживает 12 типов всплывающих окон и более 30 готовых шаблонов . Данный модуль позволяет создать практически любое всплывающее окно на вашем сайте!

Реализация модуля позволяет кастомизировать стандартные шаблоны и цветовые схемы , благодаря чему вы легко сможете внести изменение в любой шаблон/цветовую схему и оно НЕ будет стёрто после установки обновления .

Данный модуль уже более двух лет является незаменимым инструментом маркетинга для многих владельцев сайтов. Именно поэтому наш модуль постоянно развивается , в результате чего внедряется новый функционал для еще более удобной и продуктивной работы с ним.

11 типов всплывающих окон для решения задач любого типа
17 готовых шаблонов помогут быстро создать нужное окно
Гибкий конструктор условий для показа окна только когда оно действительно нужно пользователю
Возможность полной кастомизации окна для добавления необходимого вам функционала
Расширенная статистика по показам окна
Интеграция с Битрикс24 для передачи ЛИДов
Готовые шаблоны для Email уведомлений
Документация и отзывчивая техническая поддержка
14-дневный пробный период

Список всплывающих окон

Так как окон может быть много, то на странице списка всплывающих окон мы разместили компонент Битрикса, который отображает данный список в привычном для пользователей виде.

Интерфейс создания/редактирования всплывающего окна разделен на вкладки:

Первоначально необходимо выбрать тип контента , который будет отображаться во всплывающем окне.

Затем, если у выбранного типа контента есть несколько шаблонов, необходимо выбрать шаблон .

Далее, если у шаблона есть цветовые решения, необходимо выбрать цветовое решение .

Ниже отображается область предварительного просмотра всплывающего окна , которая помогает наглядно увидеть, как будет выглядеть созданное вами всплывающее окно на вашем сайте для смартфона, планшета или десктопа .

В зависимости от типа контента будут отображаться необходимые для заполнения поля . При их редактировании область предварительного просмотра автоматически обновляется.

Ниже вы можете указать код шрифта (с Google Fonts), который будет подключаться в вашем всплывающем окне.

Далее система предложит выбрать эффект появления и скрытия всплывающего окна.

Затем система предложит выбрать расположение всплывающего окна относительно экрана сайта.

Если потребуется можно включить дополнительный инструмент «Таймер» , который будет дополнительно мотивировать пользователя к действию. У него также имеются свои дополнительные настройки.

Вкладка «Условия показа»

В версии 2.0 мы внедрили новый конструктор условий показа , который позволяет гибко комбинировать все условия показа между собой.

Активность – да, нет
Служебное имя - отображается только в админке, служит для удобства использования
Приоритет – по умолчанию равен 500, чем ниже значение, тем выше приоритет срабатывания

Сайт – позволяет выбрать на каком сайте будет показываться/не показываться всплывающее окно.
Адрес страницы – служит для указания адресов разделов или страниц сайта , на которых будет показываться/не показываться всплывающее окно.
Период показа – позволяет указать период дат начала и конца показа всплывающего окна.
Группа пользователей – позволяет указать каким группам пользователей показывать/не показывать всплывающее окно.

Просмотр нескольких страниц – позволяет настроить отображение всплывающего окна при просмотре указанного числа страниц сайта.
Через несколько секунд – позволяет настроить отображение всплывающего окна после пребывания пользователя на страницах сайта больше или меньше указанного числа секунд .
Через несколько секунд на странице – позволяет настроить отображение всплывающего окна после пребывания пользователя больше или меньше указанного числа секунд на определенной странице сайта.
Часы показа – служит для указания времени работы всплывающего окна.
При достижении якоря - поместите якорь с уникальным именем на любую страницу сайта. Как только он попадет в зону видимости браузера, появится всплывающее окно.
Процент прокрутки страницы - позволяет отобразить всплывающее окно, при прокрутке пользователем страницы до определенного места.
При клике на ссылку – добавьте ссылку с уникальным классом в любое место на вашем сайте. При нажатии на нее появится всплывающее окно.
При попытке уйти с сайта – всплывающее окно будет показываться только при попытке пользователя уйти с сайта (перемещение курсора мыши вверх окна браузера).
Повторный показ – служит для указания через сколько дней всплывающее окно вновь будет показано одному пользователю.
Тип устройства - служит для указания на каких устройствах показывать/не показывать всплывающее окно.
Операционная система - позволяет указать на каких операционных системах будет показаться всплывающее окно.
Браузер - позволяет указать на каких браузерах будет показаться всплывающее окно.
День недели - служит для указания в какие дни недели показывать/не показывать всплывающее окно.

3. Для интернет-магазина

Количество товаров в корзине – всплывающее окно будет отображаться пользователю если число товаров в корзине больше или меньше указанного.
Общая стоимость товаров в корзине – всплывающее окно будет отображаться пользователю если сумма товаров в корзине больше или меньше указанной.
Товар в корзине – всплывающее окно будет показано пользователю если в его корзине присутствует/отсутствует указанный товар .
Товар из раздела – всплывающее окно будет показано пользователю если в его корзине присутствует/отсутствует товар из указанного раздела .

Статистика всплывающих окон

Для каждого окна мы ведем статистику его работы .
Мы записываем число срабатываний каждого окна, время его активности и число целевых действий (если это возможно посчитать).

Бесплатный 14-дневный демо-период позволяет протестировать функционал модуля в полном объеме и убедиться, что он успешно решает ваши бизнес-задачи!

Если вам понравилась работа нашего модуля , пожалуйста, оставьте отзыв на специальной вкладке "Отзывы", данной страницы. Мы будем очень вам благодарны!

А также, чтобы своевременно узнавать о выходе обновлений наших продуктов и другой полезной информации , мы рекомендуем вам подписаться на наши соц сети:

Стандартная установка модуля из MarketPlace.

После установки модуля, необходимо перейти во вкладку «Маркетинг» -> «Всплывающие окна PRO» , настроить условия показа и внешний вид всплывающего окна.

1. Как сделать чтобы всплывающее окно не показывалось несколько раз одному пользователю?
Необходимо добавить условие "Повторный показ".

Как сделать AJAX формы 1с-Битрикс в всплывающих окнах

Готовим javascript

Для создания всплывающих окон воспользуемся плагином jquery.fancybox. Подключаем его в шаблоне сайта или непосредственно на странице, где будет ссылка для вызова окна, предварительно скопировав содержимое архива на сайт (в примере это /js/fancybox/).

Готовим форму

Все что выше этого куска кода заменяем на

Prolog_before.php подключит необходимые системе файлы без вывода шапки шаблона сайта, она в всплывающем окне не нужна. Скрипт ajax.js нужен для работы компонентов в режиме ajax.

Все что ниже подключения компонента заменяем на

Epilog_after.php подключит необходимые системе файлы без вывода подвала шаблона сайта.

Для тестового примера с iblock.element.form.add.form код с добавленными параметрами будет выглядеть так:

Указанным способом можно показывать не только формы, но и любой другой статический и динамический контент.

Читайте также: