Модификация позволяет создавать полностью кастомные поп-апы из 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>Альтернативный способ установки предполагает встраивание исполняемого кода непосредственно перед инициализацией поп-апов. Подробнее: Синхронизация обновлений в модификациях
Дальнейшая настройка производится по инструкции к каждому из вариантов:
Элементы
Ниже приведены элементы, из которых состоит кастомный поп-ап. Они задаются и настраиваются в интерфейсе Тильды.
* – обязательные элементы
Функции и параметры
Методы, с помощью которых можно управлять работой слайдера. Подгружаются асихнронно как функции объекта popup.
В качестве аргументов для настройки поп-апа передаются следующие параметры:
События
Пользовательские события позволяют управлять последовательностью инициализации модификаций и используются для совмещения нескольких модов или стороннего кода. Их можно использовать, чтобы:
Запустить поп-ап по срабатыванию события
Отложить инициализацию поп-апа можно с помощью параметров event и timeout. Например, запустить его через 100ms после срабатывания customEvent можно таким образом:
Отложить инициализацию поп-апа можно с помощью параметров event и timeout. Например, запустить его через 100ms после срабатывания customEvent можно таким образом:
popup.init(".uc-popup", { event: "customEvent", timeout: 100 })Если модификация должна запуститься после срабатывания сразу нескольких событий, достаточно перечислить их через запятую: event: "customEvent1, customEvent2, customEvent3".
Запустить сторонний код после отрисовки поп-апа
Если код нужно выполнить после того, как поп-ап полностью запустится, добавьте слушатель события popupinit-id, где popupinit – событие отрисовки поп-апа, id – класс поп-апа без префикса uc или rec. Например, если у блока с поп-апом класс .uc-popup1, то слушатель события добавляется следующим образом:
Если код нужно выполнить после того, как поп-ап полностью запустится, добавьте слушатель события popupinit-id, где popupinit – событие отрисовки поп-апа, id – класс поп-апа без префикса uc или rec. Например, если у блока с поп-апом класс .uc-popup1, то слушатель события добавляется следующим образом:
window.addEventListener("popupinit-popup1", function(){ /*...*/ })Запустить другую модификацию после отрисовки поп-апа
Логика работы пользовательских событий одинакова для всех модификаций и помогает интегрировать их друг с другом. Например, запустить поп-ап после отрисовки слайдера можно через событие sliderinit:
Логика работы пользовательских событий одинакова для всех модификаций и помогает интегрировать их друг с другом. Например, запустить поп-ап после отрисовки слайдера можно через событие 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-блока, то их необходимо запускать после того, как блок встроится в поп-ап. Добавляем пользовательское событие 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, чтобы посмотреть настройки и переменные модификации. Данные функции работают на любом сайте с установленной библиотекой.