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

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

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

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

Модификация

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

Модификация

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

Инструкция по установке

1

Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта

Этот код устанавливается только один раз. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.

<script src="https://cdn.jsdelivr.net/gh/postnikovmd/tilda@1.1/popup.min.js"></script>

1
2

Добавьте на страницу стандартный блок BF503 (Popup: Information) и присвойте ему класс .uc-popup

Если вы планируете использовать несколько поп-апов на странице, задайте им разные названия классов, например, .uc-popup1, .uc-popup2 и т.д.
3

Добавьте на страницу Zero-блоки с содержимым поп-апа, присвойте им такой же класс и задайте их высоту в 100% экрана

Блоки должны быть расположены в той последовательности, в которой будут переключаться слайды
4

Задайте ссылку для открытия поп-апа в настройках стандартного блока, а в Zero-блоке – поставьте ссылку #close для кнопок его закрытия
5

Задайте ссылки кнопкам переключения слайдов внутри Zero-блоков: #prev для перехода назад и #next для перехода вперёд
6

Задайте в настройках модификации параметры анимации поп-апа
7

Скопируйте код и вставьте его в блок T123 в конец страницы

Открыть попап

Как это сделано?

<script src="https://cdn.jsdelivr.net/gh/postnikovmd/tilda@1.1/popup.min.js"></script>
<script>popup.init(".uc-popup", { animation: "fade", style: { blur: 4 } })</script>

Видео скоро появится…

Настройки модификации

Размытие фона

Скорость и тип переходов:

Класс поп-апа:

Анимация появления:

<script>popup.init(".uc-popup")</script>

Скопировать код

Особенности

Работает с автоскейлом

Мод работает с масштабированием так же корректно, как и без него
Можно переключать блоки

Поп-ап можно использовать как галерею cо слайдами. Подробнее
Комбинируется с формами

Можно разместить кастомную форму и сообщение об успехе. Подробнее