Всем привет, уважаемые пользователи Tilda! Сегодня рассмотрим пример, как создать псевдо pop-up из Zero Block в Tilda.
Вначале давайте разберёмся, что же такое псевдо pop-up и чем он отличается от обычного pop-up окна.
Во-первых: когда открывается обычное pop-up окно, мы видим, что оно находится поверх всего сайта, на более высоком слое. У нас блокируется скролл, и мы не можем ничего сделать, пока не закроем это окно.
Псевдо pop-up — это окно, которое не блокирует сайт, мы вообще не видим, что оно открылось. Это своего рода иллюзия: на самом деле, когда оно открывается, мы видим, что происходит некая манипуляция с элементами в данном блоке. Псевдо pop-up действует на блок, для которого он предназначен.
Давайте теперь посмотрим на примере, как его создать.
Создаём Zero Block и удаляем из него всё лишнее.
Добавляем фон и картинки с едой.
Задаём этим картинкам ссылки: #steak1, #steak2, #steak3. Адаптируем этот блок под все виды устройств и создаём копию.
В копии:
- создаём иконку закрытия pop-up окна со ссылкой #close;
- удаляем все лишние описания блюд;
- добавляем текст и кнопку со ссылкой #order;
- добавляем чёрный Shape с прозрачностью 80% на фон и расставляем элементы по слоям, затем адаптируем блок под все виды устройств.
Создаём ещё две копии данного блока и вносим правки в контент и слои.
Добавляем блок Т123 и вставляем в него код. В коде прописываем ID блоков наших псевдо pop-up в двух местах.
Вот такие блоки вы можете создавать, используя Tilda и Zero Block. Создавайте разные решения, которые на первый взгляд могут показаться сложными, но если разобраться, можно добиться вот таких классных эффектов.
Код для блока Т123
<!-- Как сделать псевдо 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>