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

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

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

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

  • Cкопируйте код ниже и вставьте его внутрь <head> в настройках сайта
    Этот скрипт устанавливается только один раз и помогает модификациям работать. Если он уже стоит у вас на сайте, добавлять его снова не нужно, просто пропустите этот шаг.
<script src="https://cdn.postnikovmd.com/tilda@1.5/mods.min.js"></script>
Скопировать код
Код скопирован!
Синхронизация обновлений включена. Новые версии и исправления будут устанавливаться автоматически.
Синхронизация обновлений включена. Модификации будут загружаться с альтернативного источника (для зарубежных проектов).
Синхронизация обновлений отключена. Текущая версия останется неизменной, независимо от обновлений.
  • Добавьте на страницу стандартный блок T1093 и присвойте ему класс .uc-popup
    В настройках поп-апа ID блока с содержимым оставьте пустым — привязка будет происходить через классы. См. пример.
  • Добавьте на страницу Zero-блок с формой обратной связи и присвойте ему такой же класс
    Если вы хотите создать своё сообщение об успешной отправке данных, добавьте ещё один Zero-блок с таким же классом и расположите его после формы.
    Для корректного отображения блокам лучше задать высоту в 100% экрана.

    Если вы планируете использовать на странице несколько поп-апов, задайте им разные названия классов, например, .uc-popup1, .uc-popup2 и т. д.
  • Скройте стандартную кнопку отправки данных в настройках формы и добавьте в блок свою кнопку со ссылкой #submit
    Скрыть стандартные кнопки можно в настройках Zero-форм. Для этого удалите текст кнопки (caption) и задайте нулевые значения для её ширины и высоты (width: 0 и height: 0).
  • Укажите ссылку для открытия поп-апа в настройках стандартного блока, а для кнопок его закрытия в Zero-блоке задайте ссылку #close
  • Задайте в настройках модификации параметры анимации поп-апа
    В сообщение об успешной отправке данных можно добавить lottie-анимацию. Для этого создайте в блоке шейп с классом .lottie, куда будет загружаться анимация и задайте в генераторе кода ссылку на файл с анимацией.
  • Скопируйте код и вставьте его в блок T123 в конец страницы
    Для плавной загрузки рекомендуется разместить поп-ап и его содержимое в конце страницы.
Открыть пример
Смотреть все примеры
+
Как это сделано? 
<script>popup.init(".uc-popup", { animation: "fade", style: { blur: 4 } })</script>
Настройки модификации

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

Размытие фона
Скорость и тип переходов:
Класс поп-апа:
Анимация появления:
<!--popup.js Поп-ап с формой обратной связи. https://postnikovmd.com/mods/popup/form-->
<script>popup.init(".uc-popup")</script>
Скопировать код
Скопировать код
Код скопирован!

Примеры

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

Элементы

Параметры

Подробная документация к модификации

Примеры использования, инструкции по установке и разбор наиболее распространенных ошибок
Присоединяйтесь к Telegram-каналу
Всё о возможностях библиотеки, новых модификациях и личном опыте
Перейти
t.me/postnikovmds
Чат для дизайнеров
«Вместе всё получится»
Поддержка по модификациям, обмен опытом, круассаны и многое другое
3,2K участников
Отправить
Оставьте тестовую заявку
Эта форма не собирает персональные данные. Можете вставить любой текст, чтобы протестировать форму
Хотите получить ответ? Напишите напрямую на почту hello@postnikovmd.com или в Telegram
Сообщение отправлено
Благодарим за ваш обращение! Мы свяжемся с вами в ближайшее время, чтобы обсудить детали запроса
Вернуться нaзад