Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
#2470a1
Как сделать псевдо 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 мин
Фрагмент видео
Посмотреть видео в личном кабинете ►
Библиотека для примера

<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>
Made on
Tilda