27 марта, 2025

Вставка стандартного блока в поп-ап

Код для вставки практически любого стандартного блока в поп-ап на сайтах на Тильде.

С помощью этой модификации можно вставить практически любой стандартный блок в поп-ап, исключение — галереи в виде слайдеров и некоторые блоки в колонках. Из-за специфического способа отрисовки таких блоков их нельзя воспроизвести корректно внутри поп-апа, к сожалению. Если есть способ решить эту проблему, то я его пока не знаю.

Данный код позволяет легко и быстро вставить стандартные блоки внутрь поп-апа в любых количествах. Вы можете собрать даже целый лендинг в модальном окне, если хотите. Также нет ограничений и на количество поп-апов на одной странице.

Модифицированные поп-апы прекрасно адаптируются под все устройства, а все их стандартные настройки задаются как обычно.

Пример поп-апа на 12 колонок:

Смотреть пример

QUENTIN TARANTINO & ROGER AVARY

Pulp Fiction (1994)

The lives of two mob hit men, a boxer, a gangster's wife, and a pair of diner bandits intertwine in four tales of violence and redemption.

Explore Our Features

We work hard every day to make our customers' lives better and happier

И пример поп-апа на 100% ширины экрана:

Смотреть пример

Light tomorrow with today

Always celebrate small wins. Even if you failed at the beginning, it’s okay. You can always start all over again.

About us

Digital Storytelling

Tilda Publishing

Digital Storytelling

The Future

Contact us

+1 123 4567890
hello@loftpineapple.com
Pineapple Loft, 22 Pink Street, New York

Вам нужно проделать два простых шага для реализации этой модификации.

Шаг 1. Подготовьте стандартный поп-ап

Добавьте на страницу стандартное окно — блок BF503. Сотрите ВЕСЬ контент в этом блоке, в противном случае он также появится в поп-апе вместе с другими блоками.

Настройте его так, как вам хочется: задайте нужную ширину (в колонках или на 100% ширины экрана), цвет затемнения и его прозрачность, выравнивание и т.д.

Присвойте этому блоку класс, например, .uc-popup. Если у вас на странице несколько таких поп-апов, можно задать им нумерацию: .uc-popup1, .uc-popup2, .uc-popup3 и т.д.

Задайте поп-апу любую ссылку для вызова и вставьте ее в любую кнопку.

Шаг 2. Подготовьте стандартные блоки и вставьте код

Добавьте на страницу стандартные блоки, которые вы хотите вставить в модальное окно. Присвойте им классы, например, .uc-innerblock1, .uc-innerblock2, .uc-innerblock3, .uc-innerblock4 и так далее, каждому блоку — свой уникальный класс.

Вы также можете настроить им любую ширину, но помните, что, если блок шире поп-апа, он скорее всего встанет криво. Поэтому постарайтесь соблюдать одинаковую ширину и там и там.

Вставьте данный код на страницу с вашими блоками и поп-апом в Т123:

<!--Code by khudova.design-->
<script>
$(document).ready(function(){
    $('.uc-innerblock1').appendTo('.uc-popup1 .t-popup__container');
    $('.uc-innerblock2').appendTo('.uc-popup1 .t-popup__container');
    $('.uc-innerblock3').appendTo('.uc-popup1 .t-popup__container');
    $('.uc-innerblock4').appendTo('.uc-popup1 .t-popup__container');
});
</script>

Внимание!

Для работы кода убедитесь, что у вас подключена библиотека jQuery (Настройки сайта → Еще → Галочка «Подключить jQuery на страницах сайта»)

Вставьте в код ваши классы, таким образом:

$('.класс_стандартного_блока_№1').appendTo('.класс_поп-апа_№1 .t-popup__container');
$('.класс_стандартного_блока_№2').appendTo('.класс_поп-апа_№1 .t-popup__container');

Классы стандартных блоков вставляете сверху вниз в том же порядке, в каком они должны стоять и в поп-апе друг за другом.

Если у вас два поп-апа, то продублируйте эти строки, заменив в них соответствующие классы, например так:

$('.класс_стандартного_блока_№6').appendTo('.класс_поп-апа_№2 .t-popup__container');
$('.класс_стандартного_блока_№7').appendTo('.класс_поп-апа_№2 .t-popup__container');

$('.класс_стандартного_блока_№8').appendTo('.класс_поп-апа_№3 .t-popup__container');
$('.класс_стандартного_блока_№9').appendTo('.класс_поп-апа_№3 .t-popup__container');

Заключение

Все блоки поддаются css модификациям как обычно, поэтому вы можете сами задавать им дополнительные стили, например, регулировать отступы.

Все вопросы или предложения по данной модификации вы можете написать в комментариях к статье или в моем тг-канале, я обязательно вам отвечу.

Понравилась статья?

Будьте в курсе

Подписывайтесь на мой ТГ канал

Там я пишу о разработке сайтов на Тильде, дизайне и делюсь полезными ресурсами, статьями и модификациями.

Перейти в канал