Как сделать псевдо 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.

ORDER

#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.

ORDER

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.

ORDER

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-х местах

Mo-ti Level Up

Видео инструкции по добавлению кода и работе с Zero Block.

Подписка на видео

Список всех видео

Создаём псевдо поп-ап из ZeroBlock. Размещаем элементы на разных слоях.
Длительность видео: 20 мин

Фрагмент видео

Посмотреть видео в личном кабинете ►

Библиотека для примера

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

<!-- Как сделать псевдо popUp из ZeroBlock в Tilda mo-ti.ru --><script src="https://static.tildacdn.com/js/jquery-1.10.2.min.js" charset="utf-8" onerror="this.loaderr='y';"></script><style>
a[href="#shapeclose"]{
   cursor: default;
}
/*Стили для псевдо popUp*/
    .psevdopopUp {
    position:absolute;
    z-index:100;
    width:100%;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-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);
    $('.t396').trigger('displayChanged');

});  
//При клике на иконку с конкретной ссылкой 1
$('a[href="#steak2"]').click(function(e) {e.preventDefault();
    //Задаём класс открытого псевдо окна и назначаем спец слой
    $(this).addClass('openwind').closest('.t396__elem').addClass('highlayer');
    //Показываем нужное псевдо окно
    $('#rec132134211').fadeIn(400);
    $('.t396').trigger('displayChanged');
});  
//При клике на иконку с конкретной ссылкой 1
$('a[href="#steak3"]').click(function(e) {e.preventDefault();
    //Задаём класс открытого псевдо окна и назначаем спец слой
    $(this).addClass('openwind').closest('.t396__elem').addClass('highlayer');
    //Показываем нужное псевдо окно
    $('#rec132136690').fadeIn(400);
    $('.t396').trigger('displayChanged');
});  


//При клике на иконку Закрыть
$('a[href="#close"], a[href="#order"] , a[href="#shapeclose"]').click(function(e) {e.preventDefault();
    setTimeout(function(){
    //Выключаем стили отрытого окна и спец слоя    
    $('.zoommode').removeClass('openwind');
    $('.t396__elem').removeClass('highlayer');
    }, 200);   
    //Скрываем псевдо окна
    $('.psevdopopUp').fadeOut(400);
});  
});
</script>