Как сделать псевдо popUp из ZeroBlock в Tilda
#Steak1
Special menu for you
#Steak2
Special menu for you
#Steak3
Special menu for you
#Steak1
Steak (not to be confused with 'stake') is a slice off a larger piece of meat, usually beef. In North America, steaks are usually grilled. They are also often pan-fried or broiled. The most tender (softest) cuts of the animal are usually used for steak. This also means that steaks have a high price. The pieces of meat used for steaks are usually cut across the muscle fiber, not along it. This makes them appear more tender. A restaurant that mainly makes steaks is known as a steakhouse. A well-known side dish to steak is prawns or a cooked lobster tail.
#Steak2
Steak (not to be confused with 'stake') is a slice off a larger piece of meat, usually beef. In North America, steaks are usually grilled. They are also often pan-fried or broiled. The most tender (softest) cuts of the animal are usually used for steak.
This also means that steaks have a high price. The pieces of meat used for steaks are usually cut across the muscle fiber, not along it. This makes them appear more tender. A restaurant that mainly makes steaks is known as a steakhouse. A well-known side dish to steak is prawns or a cooked lobster tail.
#Steak3
Steak (not to be confused with 'stake') is a slice off a larger piece of meat, usually beef. In North America, steaks are usually grilled. They are also often pan-fried or broiled. The most tender (softest) cuts of the animal are usually used for steak.
This also means that steaks have a high price. The pieces of meat used for steaks are usually cut across the muscle fiber, not along it. This makes them appear more tender. A restaurant that mainly makes steaks is known as a steakhouse. A well-known side dish to steak is prawns or a cooked lobster tail.

Как сделать псевдо popUp из ZeroBlock в Tilda

1
Создали основной ZeroBlock и добавили картинки с едой.
2
Задали этим картинкам ссылки #steak1 , #steak2 , #steak3.
Адаптировали этот блок. Затем просто создали копию
3
В копии:
- создали иконку закрыть со ссылкой #close
- удалили лишние подписи
- добавили текст и кнопку со ссылкой #order
- добавили черный Shape с прозрачностью 80% на фон
- расставили элементы по слоям
- адаптировали
4
Создали ещё две копии последнего блока и произвели изменения в контенте и в слоях
5
Добавили код в блок Другое - Т123
6
В коде прописали ID блоков наших псевдо popUp в 2-х местах
Библиотека для примера
<style>
/*Стили для псевдо popUp*/
    .psevdopopUp {
    position:absolute;
    z-index:100;
    width:100%;
    transform: translateY(-100%);
}
/*Стиль для иконок при клике*/
.highlayer{
   z-index:555 !important; 
   filter: drop-shadow(0px 0px 16px rgba(255, 255, 255, .90));
}
/*Плавность для иконок*/
.zoommode {transition: transform 0.1s linear;}
/*Увеличение при наведении*/
.zoommode:hover {transform: scale(1.02);}
/*Увеличение при клике*/
.openwind{ transform: scale(1.02) !important;}
</style>

<script>
    $( document ).ready(function() {
//Прописываем блоки для псевдо popUp
$('#rec132127493, #rec132134211 , #rec132136690').addClass('psevdopopUp').hide();
//Присваиваем классы иконкам    
$('a[href="#steak1"]').addClass('zoommode');
$('a[href="#steak2"]').addClass('zoommode');
$('a[href="#steak3"]').addClass('zoommode');
 
//При клике на иконку с конкретной ссылкой 1
$('a[href="#steak1"]').click(function(e) {e.preventDefault();
    //Задаём класс открытого псевдо окна и назначаем спец слой
    $(this).addClass('openwind').closest('.t396__elem').addClass('highlayer');
    $('#rec132127493').fadeIn(400);//Показываем нужное псевдо окно
});  
//При клике на иконку с конкретной ссылкой 1
$('a[href="#steak2"]').click(function(e) {e.preventDefault();
    //Задаём класс открытого псевдо окна и назначаем спец слой
    $(this).addClass('openwind').closest('.t396__elem').addClass('highlayer');
    $('#rec132134211').fadeIn(400);//Показываем нужное псевдо окно
});  
//При клике на иконку с конкретной ссылкой 1
$('a[href="#steak3"]').click(function(e) {e.preventDefault();
    //Задаём класс открытого псевдо окна и назначаем спец слой
    $(this).addClass('openwind').closest('.t396__elem').addClass('highlayer');
    $('#rec132136690').fadeIn(400);//Показываем нужное псевдо окно
});  
//При клике на иконку Закрыть
$('a[href="#close"], a[href="#order"]').click(function(e) {e.preventDefault();
    setTimeout(function(){
    //Выключаем стили отрытого окна и спец слоя    
    $('.zoommode').removeClass('openwind');
    $('.t396__elem').removeClass('highlayer');
    }, 200);  $('.psevdopopUp').fadeOut(400);//Скрываем псевдо окна
});  
});
</script>
Made on
Tilda