Документация — модификации для Zero-блоков
2025-09-05 10:48

Поп-ап из Zero-блоков

Модификации
Поп-ап из Zero-блоков
Документация
10 минут
Модификация позволяет создавать полностью кастомные поп-апы из Zero-блоков — с управлением кнопками, формой обратной связи, и настраиваемой анимацией

Как работает модификация

Общие механики

Модификация подставляет блоки с заданным классом в стандартный поп-ап T1093 или BF503 и позволяет переключать их с помощью кнопок вперёд/назад.
В отличие от стандартных поп-апов, мод позволяет управлять моментом подстановки блоков и запускать функционал после инициализации стороннего кода или модификаций. Это позволяет добавлять в поп-апы свой функционал — слайдер, вкладки, аккордеон и пр.
Анимация и её скорость регулируется параметрами animation и transition в настройках модификации.

Классический поп-ап из Zero-блоков

Аналог стандартных блоков T1093 и BF503, запуском которых можно управлять с помощью параметров event и timeout. В качестве содержимого можно использовать как стандартные, так и Zero-блоки.
Подробнее: Классический поп-ап из Zero-блоков

Поп-ап с переключением слайдов

Классический поп-ап, состоящий из нескольких блоков, последовательно переключающихся при нажатии на кнопки вперёд/назад.
Подробнее: Поп-ап с переключением слайдов

Поп-ап с формой обратной связи

Поп-ап с переключением слайдов, состоящий из двух блоков – формы обратной связи и сообщения об успехе, которое появляется при её успешной отправке.
Подробнее: Поп-ап с формой обратной связи

Начало работы

Установка библиотеки

Для работы поп-апов необходимо подключить библиотеку модификаций в <head> сайта. Скрипт устанавливается только один раз и автоматически загружает нужный мод при вызове функции.
<script src="https://cdn.postnikovmd.com/tilda@1.4/mods.min.js"></script>
Альтернативный способ установки предполагает встраивание исполняемого кода непосредственно перед инициализацией поп-апов. Подробнее: Синхронизация обновлений в модификациях
Дальнейшая настройка производится по инструкции к каждому из вариантов:

Элементы

Ниже приведены элементы, из которых состоит кастомный поп-ап. Они задаются и настраиваются в интерфейсе Тильды.
Элемент
Описание
Класс/Ссылка
Поп-ап*
Стандартный блок T1093/BF503 с основным функционалом. Если в качестве содержимого используются Zero-блоки, для поп-апа подойдёт T1093, для поп-апов со стандартными блоками лучше всего использовать BF503.
.uc-popup
Содержимое поп-апа*
Блоки, подставляющиеся внутрь поп-апа. При использовании поп-апа с несколькими слайдами или формой обратной связи, блоки будут последовательно переключаться при нажатии на кнопки. Для классического поп-апа при отсутствии данных кнопок, можно размещать несколько блоков прямо друг под другом.
.uc-popup
Кнопка закрытия
Кнопка, при нажатии на которую будет закрываться поп-ап. Если на странице открыто сразу несколько поп-апов, они будут скрываться последовательно, в зависимости от того, на каком из них была нажата соответствующая кнопка.
#close
Кнопка «Вперёд»
Кнопка переключения на следующий слайд. Если в поп-апе есть элементы со ссылками #prev и #next, блоки будут переключаться последовательно друг за другом. При отстутствии кнопок навигации, блоки поп-апа будут отображаться сразу друг под другом.
#next
Кнопка «Назад»
Кнопка переключения на предыдущий слайд. Работает аналогично кнопке «Вперёд»
#prev
Кнопка отправки формы
Своя кнопка, при нажатии на которую в поп-апе будет отправляться форма. В качестве кнопки может быть выбран любой элемент со ссылкой #submit, при условии, что стандартная кнопка Submit в форме отстутствует.
#submit
Контейнер для lottie-анимации
Шейп, в который будет вставляться Lottie-анимация при успешной отправки формы. Работает только на следующем после формы слайде.
.lottie
* – обязательные элементы

Функции и параметры

Методы, с помощью которых можно управлять работой слайдера. Подгружаются асихнронно как функции объекта popup.
Функция
Описание
Триггер
popup.init(selector, params)
Инициализирует кастомный поп-ап
DOM Content Loaded
В качестве аргументов для настройки поп-апа передаются следующие параметры:
Параметр
Описание
Тип
Значение по-умолчанию
selector
Класс поп-апа и его содержимого
string
–
params.close
Ссылка для кнопок закрытия поп-апа
string
'#close'
params.prev
Ссылка для переключения назад
string
'#prev'
params.next
Ссылка для переключения вперёд
string
'#next'
params.submit
Ссылка для кнопки отправки формы
string
'#submit'
params.hash
Открытие поп-апа по ссылке при заходе на страницу
boolean
false
params.animation
Анимация появления поп-апа
string
'fade'
params.transition
Скорость анимации
number
300
params.easing
Функция перехода для анимации
string
'ease-in-out'
params.lottie.selector
Класс шейпа для загрузки Lottie
string
'.lottie'
params.lottie.url
Ссылка на файл с Lottie-анимацией
string
–
params.lottie.speed
Скорость Lottie-анимации
number
1
params.style.blur
Размытие фона поп-апа
number
0

События

Пользовательские события позволяют управлять последовательностью инициализации модификаций и используются для совмещения нескольких модов или стороннего кода. Их можно использовать, чтобы:
Запустить поп-ап по срабатыванию события
Отложить инициализацию поп-апа можно с помощью параметров event и timeout. Например, запустить его через 100ms после срабатывания customEvent можно таким образом:
popup.init(".uc-popup", { event: "customEvent", timeout: 100 })
Если модификация должна запуститься после срабатывания сразу нескольких событий, достаточно перечислить их через запятую: event: "customEvent1, customEvent2, customEvent3".
Запустить сторонний код после отрисовки поп-апа
Если код нужно выполнить после того, как поп-ап полностью запустится, добавьте слушатель события popupinit-id, где popupinit – событие отрисовки поп-апа, id – класс поп-апа без префикса uc или rec. Например, если у блока с поп-апом класс .uc-popup1, то слушатель события добавляется следующим образом:
window.addEventListener("popupinit-popup1", function(){ /*...*/ })
Запустить другую модификацию после отрисовки поп-апа
Логика работы пользовательских событий одинакова для всех модификаций и помогает интегрировать их друг с другом. Например, запустить поп-ап после отрисовки слайдера можно через событие sliderinit:
popup.init(".uc-popup", { event: "sliderinit-slider" })

Инициализация

Код инициализации поп-апа вставляется в блок T123 в конец страницы. Его можно скопировать в генераторе кода или добавить на страницу вручную. В исходном виде он выглядит таким образом:
<!--popup.js Поп-ап из Zero-блока. https://postnikovmd.com/mods/popup-->
<script>popup.init(".uc-popup")</script>

Примеры использования

Поп-ап из Zero-блока

Классический вариант, в котором на страницу добавляется блок T1093, ему и блокам с содержимым присваивается класс .uc-popup, и кнопкам закрытия – ссылка #close.
В настройках T1093 указывать ID блока с содержимым не нужно.
<script>popup.init(".uc-popup", { animation: "zoom", style: { blur: 4 } })</script>
Для стилизации поп-апа дополнительно задаём анимацию с увеличением и размытие заднего фона в параметрах инициализации.
Пример: Поп-ап из Zero-блока

Поп-ап с переключением слайдов

Аналог классического поп-апа с несколькими Zero-блоками и навигацией через кнопки #prev и #next. Устанавливается таким же образом.
<script>popup.init(".uc-popup", { animation: "fade", style: { blur: 4 } })</script>
Пример: Поп-ап с переключением слайдов

Поп-ап с формой обратной связи

Поп-ап с несколькими слайдами, в одном из которых расположена форма обратной связи, а в другом – сообщение об успехе.
Выполняем аналогичные действия по настройке поп-апа, скрываем стандартную кнопку отправки данных в форме и добавляем свою со ссылкой #submit.
<script>popup.init(".uc-popup", { animation: "fade", style: { blur: 4 } })</script>
Блок с сообщением об успехе добавлять необязательно. Если в поп-апе оно не предусмотрено, появится стандартное сообщение об успехе, предусмотренное функционалом Тильды.
Пример: Поп-ап с формой обратной связи

Поп-ап со стандартным блоком

Аналог классического варианта, в котором вместо стандартного блока T1093 используется поп-ап BF503, а в качестве содержимого — любые стандартные блоки (в одном поп-апе их может быть как один, так и несколько).
Задаём поп-апу BF503 и блокам с содержимым класс .uc-popup и добавляем дополнительные параметры в код инициализации:
<script>popup.init(".uc-popup", { animation: "zoom", style: { blur: 4 } })</script>
<style>
    /* Убираем отступы для стандартного блока*/
    .uc-popup .t819 .t-col {
        margin: 0 !important; 
        padding: 0 !important;
    }
</style>
Для того, чтобы стандартный блок корректно вписывался в поп-ап, указали ему нулевые отступы через CSS.
Пример: Поп-ап со стандартным блоком

Поп-ап в другом поп-апе

Если добавить внутрь поп-апа кнопку открытия другого поп-апа, он будет открываться поверх первого. Все настройки выполняются аналогично классическому варианту.
<script>popup.init(".uc-popup", { animation: "zoom", style: { blur: 4 } })</script>
<script>popup.init(".uc-popup2", { animation: "zoom", style: { blur: 4 } })</script>
Пример: Поп-ап в другом поп-апе

Слайдер из Zero-блока в поп-апе

Для вставки слайдера из Zero-блоков в поп-ап используются пользовательские события. После отрисовки необходимо встроить слайдер в стандартный поп-ап T1093 с помощью события sliderinit.
<!--Инициализируем слайдер-->
<script>slider.init(".uc-slider")</script>

<!--Отслеживаем инициализацию слайдера и запускаем поп-ап-->
<script>popup.init(".uc-slider", { event: "sliderinit-slider" })</script>
Пример: Слайдер из Zero-блока в поп-апе

Аккордеон из Zero-блока в поп-апе

Если внутри поп-апа находится кастомный аккордеон, то по аналогии со слайдером запускать его необходимо перед помещением в поп-ап. Добавляем пользовательское событие accordioninit в код инициализации поп-апа:
<!--Инициализируем аккордеон-->
<script>accordion.init(".uc-popup", { collapse: true, style: { active: { backgroundColor: "#F8F7FA", borderColor: "#F3F2F7", borderWidth: 1, borderRadius: 12 }, icon: { backgroundColor: "#18181B", backgroundImage: "https://static.postnikovmd.com/img/accordion-arrow-w.svg" } } })</script>

<!--Отслеживаем инициализацию аккордеона и запускаем кастомный поп-ап-->
<script>popup.init(".uc-popup", { event: "accordioninit-popup", animation: "zoom", style: { blur: 4 } })</script>
Пример: Аккордеон из Zero-блока в поп-апе

Табы из Zero-блока в поп-апе

Если внутри поп-апа находятся вкладки из Zero-блока, то их необходимо запускать после того, как блок встроится в поп-ап. Добавляем пользовательское событие popupinit в код инициализации вкладок, а в качестве их селектора указываем ID блока с поп-апом:
<!--Инициализируем кастомный поп-ап-->
<script>popup.init(".uc-tabs", { animation: "zoom", style: { blur: 4 } })</script>

<!--Отслеживаем инициализацию поп-апа и запускаем вкладки-->
<script>tabs.init("#rec1013325591", { event: "popupinit-tabs" })</script>
Пример: Табы из Zero-блока в поп-апе

Если при установке что-то пошло не так

Добавьте параметр ?showerrors в конец ссылки, чтобы увидеть ошибки и рекомендации по их исправлению, или параметр ?showparams=popup, чтобы посмотреть настройки и переменные модификации. Данные функции работают на любом сайте с установленной библиотекой.
Попробовать