Услуги и стоимость

Связаться

Максим Постников

Модификации

+16

Behance

Сообщить об ошибке

Модификации

Максим Постников

+16

Главная
→
Модификации
→
Поп-ап из Zero-блоков
→
Время настройки: 2 минуты

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

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

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

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

Модификация

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

Модификация

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

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

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

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

<script src="https://cdn.postnikovmd.com/tilda@1.4/mods.min.js"></script>

Добавьте на страницу стандартный блок T1093 и присвойте ему класс .uc-popup

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

Блоки должны быть расположены в той последовательности, в которой будут переключаться слайды. Для корректного отображения лучше всего задать им высоту в 100% экрана.
Укажите ссылку для открытия поп-апа в настройках стандартного блока, а для кнопок его закрытия в Zero-блоке задайте ссылку #close
Задайте ссылки кнопкам переключения слайдов внутри Zero-блоков: #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>

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

Особенности

Работает с любыми блоками

Поп-ап поддерживает как Zero, так и стандартные блоки
Можно переключать слайды

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

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

Документация

Элементы

Параметры

Чат для дизайнеров

Вместе всё получится

3 000+ человек

Присоединяйтесь ко мне в Telegram-канале!

Чтобы узнавать о новых модификациях и получать оперативную тех. поддержку

t.me/postnikovmds

Можете меня поблагодарить

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

Присоединяйтесь ко мне в Telegram-канале!

Чтобы узнавать о новых модификациях и получать оперативную тех. поддержку

t.me/postnikovmds

© 2025 Максим Постников. Все права защищены.

Связаться

Модификации

Максим Постников

Сообщить об ошибке

Политика Конфиденциальности

Столкнулись с ошибкой?

Расскажите подробнее о проблеме, при которой модификация не работает или работает неправильно

Хотите получить ответ по проблеме? Напишите напрямую на почту hello@postnikovmd.com или в Telegram

Хотите получить ответ по проблеме? Напишите напрямую на на почту или в Telegram

Расскажите подробнее о проблеме, при которой модификация работает неправильно

Сообщение отправлено

Спасибо за обращение! Мы провалидируем ошибку и исправим её в ближайшее время

Нравятся модификации?

Поделитесь впечатлениями от работы с библиотекой — обратная связь поможет нам стать лучше

Поделитесь впечатлениями о сервисе — обратная связь поможет нам стать лучше

Сообщение отправлено

Спасибо, что делитесь с нами! Это помогает нам развиваться и улучшать сервис