Как сделать pop-Up с вкладками из блока CL47 в Tilda
Our experience experts
Our company specializes in technological and IT-related services such as product engineering, warranty management, building cloud, infrastructure, network, etc.
Max Holden
Founder & Art Director
Eva Stark
Customer Support
Julia Bush
Design Director
Max Holden
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
Eva Stark
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
Julia Bush
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
Carlos Lott
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
Как сделать pop-Up с вкладками из блока CL47 в Tilda
1
Создали блок CL47 и задали ему класс uc-tabblock
2
Создали блок BF503 - 100% по ширине и задали ему класс uc-tabpopup
3
Создали кнопку и задали ей ссылку вызова на BF503
4
Добавили код в блок Другое - Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Делаем popup окно из блока CL47, используя блок BF503
Фрагмент видео
Библиотека для примера
<script>
document.addEventListener("DOMContentLoaded", function(){
(function () {
let popup = 'uc-tabpopup';
let block = 'uc-tabblock';
let tabPopup = document.querySelector('.'+popup+' .t-popup__container');
let tabBlock = document.querySelector('.'+block);
tabPopup.innerHTML = '';tabPopup.append(tabBlock);
let clTabs = document.querySelectorAll('.'+block+' .t817__tab');
let clSel = document.querySelectorAll('.'+block+' .t817__select');
for (let i = 0; i < clTabs.length; i++) {clTabs[i].addEventListener('click', function() {hashEmp() })};
for (let i = 0; i < clSel.length; i++) {clSel[i].addEventListener('change', function() {hashEmp()})};
function hashEmp(){ setTimeout(() => {history.pushState(null, null, ' ')}, 50)};
})();
});
</script>
<style>
.uc-tabpopup .t-popup {padding: 0 !important;}
.uc-tabpopup .t-popup__container {left: 0;right: 0;background: none;}
.uc-tabblock .t817__col {position: relative;}
@media (min-width:960px){
.uc-tabblock .t817__col:after {content: "";
background-image: url(https://static.tildacdn.com/tild6432-3463-4365-a337-363436633835/Group_9_1.svg);
background-size: contain;
background-repeat: no-repeat;
width: 23px;
height: 23px;
position: absolute;
top: -23px;
right: 0px;
z-index: 999;
pointer-events: none;
}
.uc-tabpopup .t-popup__close {display: none;}
}
</style>
