Как создать popup окно из ZeroBlock для Tilda
Что от удлинителя нужно прорабам?
Чтобы был вандалоустойчив
«На производстве всякое бывает, но инструменты должны работать как можно дольше»
Чтобы нормально стоил
«Хочется нормального качества, но за разумные и адекватные деньги»
Чтобы не било током
«Толстая и надёжная изоляция не повредит ни одному удлинителю»
Чтобы не лопались вилки при падении
«Рабочие часто бросают вилки или ходят по ним»
Чтобы переносил сырость
«Бывает и дождь, и лужа, и град, и снег»
Чтобы соответствовал нормам безопасности
«С электричеством не шутят»

Как создать popup окно из ZeroBlock для Tilda

1
Создали кнопку вызова окна и задали ей ссылку #uc-zw-price
Где #uc-zw- обязательная часть, а price - произвольная
2
Создали popUp блок BF503 c шириной 100% и задали ему класс uc-main-popup
3
Создали ZeroBlock и задали ему класс uc-zw-price
Он должен быть таким же как и ссылка у кнопки, только без #
4
Если нужна своя иконка закрытия, то просто создаём её в зеро со ссылкой #popup-close
5
Вставили код в блок Другое - Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём обычный ZeroBlock со своими настройками, а затем делаем из него PopUp окно
Фрагмент видео
Библиотека для примера

<script>
document.addEventListener("DOMContentLoaded", function(){
//Полуаем нужные элементы
let popupBtn =  document.querySelectorAll('[href^="#uc-zw"]');
let popupZero = document.querySelectorAll('div[class*="uc-zw-"]');
let mainPopup = document.querySelector('.uc-main-popup');

if(popupBtn.length&&popupZero.length&&mainPopup){
    let popupCont = mainPopup.querySelector('.t-popup__container');
    let popupCloseIcon = mainPopup.querySelector('.t-popup__close');

    //Очищаем popup и получаем ссылку его вызова
    popupCont.innerHTML = '';
    let popupHook = mainPopup.querySelector('.t-popup').getAttribute('data-tooltip-hook');
    
    //Создаём элемент со ссылкой вызова popup
    let popupLink = document.createElement('a');
    popupLink.href = popupHook; popupLink.className = "bf503-zero";
    mainPopup.appendChild(popupLink);

    //Размечаем наши Zero для привязки к нужной ссылке
    for (let i = 0; i < popupZero.length; i++) {
        popupZero[i].classList.add("popup-zero" , "hide-popup-zero");
        
        //Закрываем окно при клике на вне элементов
        popupZero[i].querySelector('.t396__filter').addEventListener('click', function() { popupCloseIcon.click() });
        
        //Закрываем окно при клике на кнопку #popup-close
        setTimeout(function(){
            let closeIcon = popupZero[i].querySelector('a[href="#popup-close"]');
            if(closeIcon != null){
                popupCloseIcon.classList.add("hide-popup-zero");
                closeIcon.addEventListener('click', function(e) {
                    popupCloseIcon.click();e.preventDefault();
                });
            };
        }, 1000);
        
        //Закрываем окно при отправке формы
        popupZero[i].addEventListener('click', function(e){
            let type = e.target.getAttribute('type');
            if(type=="submit"){
                setTimeout(function(){
                    let form = e.target.closest('.t-form');
                    if (form.classList.contains('js-send-form-success')) popupCloseIcon.click();
                }, 1000);
            };
        });
        
        //Добавляем атрибут в виде ссылки
        let classZeroPopup = popupZero[i].getAttribute('class');
        let classArrZeroPopup = classZeroPopup.split(' '); 
        classArrZeroPopup.forEach(function(item, j) {
            if(item.includes('uc-zw-')) {
                popupZero[i].setAttribute('data-zero-popup', item);
                popupZero[i].classList.remove(item);
            };
        });
    };
    
    //Отслеживаем закрытие окна
    let popupShow = mainPopup.querySelector('.t-popup');
    let observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
            setTimeout(function(){
                popupShow = mainPopup.querySelector('.t-popup');
                if (!popupShow.classList.contains('t-popup_show')) {
                    let activeZero = mainPopup.querySelector('.active-popup-zero');

                    let frame = activeZero.querySelectorAll('iframe');
                    if(frame.length){frame.forEach(i => i.src = i.src)};
                    
                    let video = activeZero.querySelectorAll('video');
                    if(video.length){video.forEach(i => i.pause())};
                };
            }, 500);
        });
    });
    observer.observe( popupShow, {  attributes: true, attributeFilter: ['class'] });
    
    //Отслеживаем нажатие кнопок для вызова окна
    for (let i = 0; i < popupBtn.length; i++) {
        popupBtn[i].addEventListener('click', function(e) {e.preventDefault();
            let link = (this.getAttribute('href')).replace('#' , '');
            let popupZeroActive = document.querySelector('div[data-zero-popup="'+link+'"]');
            if(popupZeroActive){
                if (!popupZeroActive.hasAttribute("zero-popup-mode")) {
                    popupCont.append(popupZeroActive);
                    popupZeroActive.setAttribute('zero-popup-mode','');  
                };
                let zeroInside = popupCont.querySelectorAll('.popup-zero');
                if(zeroInside){ 
                    zeroInside.forEach(i => i.classList.add("hide-popup-zero"));
                    zeroInside.forEach(i => i.classList.remove("active-popup-zero")) 
                };
                popupZeroActive.classList.remove('hide-popup-zero'); 
                popupZeroActive.classList.add('active-popup-zero'); 
                
                let popup = mainPopup.querySelector('.t-popup');
                popup.classList.add("popup-transition");
                popupLink.click();
            };
        });
    };
};
});
</script>

<style>
div[class*="uc-zw-"], .hide-popup-zero {
    position: absolute;
    width: 100%;
    top: 0;
    opacity: 0;
    z-index: -10;
    pointer-events: none;
}
.uc-main-popup .t-popup {
    padding: 0;
    display: block !important;
    pointer-events: none;
}
.uc-main-popup .t-popup__container {left:0; right:0;background: none}
.tn-atom .t-form__errorbox-wrapper, 
.tn-form__errorbox-popup, 
.t-form-success-popup { z-index: 9999999 !important}
div#tilda-popup-for-error {display: none !important}
.popup-zero .t396__filter {cursor: pointer}
.uc-main-popup .t-popup.t-popup_show {pointer-events: auto}
.uc-main-popup .t-popup { transition: none}
.uc-main-popup .popup-transition {transition: opacity ease-in-out .3s;}
.uc-main-popup { 
    position: fixed; 
    z-index: 999; 
} 
</style>
Zero Block
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch
Made on
Tilda