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

Оформить доступ с промокодом
100
#2470a1
Как сделать 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.
View all team >
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. 
Send e-mail

Как сделать 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>
Made on
Tilda