Поп-ап из Zero-блоков
Позволяет создавать полностью кастомные слайдеры из Zero-блоков — с управлением кнопками, зацикливанием, табами и настраиваемой анимацией
Поп-ап с переключением слайдов
Инструкция по установке
- Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайтаЭтот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.
<script src="https://cdn.postnikovmd.com/tilda@1.5/mods.min.js"></script>Скопировать код
Код скопирован!
Синхронизация обновлений включена. Новые версии и исправления будут устанавливаться автоматически.
Синхронизация обновлений включена. Модификации будут загружаться с альтернативного источника (для зарубежных проектов).
Синхронизация обновлений отключена. Текущая версия останется неизменной, независимо от обновлений.
-
- Добавьте на страницу стандартный блок T1093 и присвойте ему класс .uc-popupВ настройках поп-апа ID блока с содержимым оставьте пустым — привязка будет происходить через классы. См. пример.
- Добавьте на страницу Zero-блоки с содержимым поп-апа и присвойте им такой же классБлоки должны быть расположены в той последовательности, в которой будут переключаться слайды. Для корректного отображения лучше всего задать им высоту в 100% экрана.
Если вы планируете использовать на странице несколько поп-апов, задайте им разные названия классов, например, .uc-popup1, .uc-popup2 и т. д. - Укажите ссылку для открытия поп-апа в настройках стандартного блока, а для кнопок его закрытия в Zero-блоке задайте ссылку #close
- Задайте ссылки кнопкам переключения слайдов: #prev для перехода назад и #next для перехода вперёд
- Задайте в настройках модификации параметры анимации поп-апа
- Скопируйте код и вставьте его в блок T123 в конец страницыДля плавной загрузки рекомендуется разместить поп-ап и его содержимое в конце страницы.
<script>popup.init(".uc-popup", { animation: "fade", style: { blur: 4 } })</script> Настройки модификации
Настройки модификации
Размытие фона
Скорость и тип переходов:
Класс поп-апа:
Анимация появления:
<!--popup.js Поп-ап с переключением слайдов. https://postnikovmd.com/mods/popup/slides-->
<script>popup.init(".uc-popup")</script>Примеры
classic
Классический поп-ап
Стандартный поп-ап T1093 с кастомной логикой открытия
Открыть пример
slides
Поп-ап с несколькими слайдами
Пример поп-апа с переключением между слайдами (вперёд/назад)
Открыть пример
form
Поп-ап с формой заявок
Пример с формой отправки данных и сообщением об успехе
Открыть пример
default
Стандартный блок в поп-апе
Пример поп-апа с одним или несколькими стандартными блоками
Открыть пример
multiply
Поп-ап в поп-апе
Пример вложенного открытия одного поп-апа внутри другого
Открыть пример
hash
Поп-ап с открытием по ссылке
Поп-ап, который открывается по hash-ссылке при загрузке страницы
Открыть пример
Документация
Элементы
Параметры
Подробная документация к модификации
Примеры использования, инструкции по установке и разбор наиболее распространенных ошибок
Присоединяйтесь к Telegram-каналу
Всё о возможностях библиотеки, новых модификациях и личном опыте
Перейти
t.me/postnikovmds
Чат для дизайнеров
«Вместе всё получится»
«Вместе всё получится»
Поддержка по модификациям, обмен опытом, круассаны и многое другое
3,2K участников
Навигация
© 2025 Максим Постников. Все права защищены.
Максим—Постников©