URL скопирован в буфер обмена!
Как сделать Popup окно из Zero Block на Tilda?
С помощью этой модификации можно создать свой popup на зеро блоке и показывать его при клике на кнопку. Дополнительно можно затемнять фон и отключать скролл в открытом попап окне, а также вывести свой крестик для закрытия popup.
Модификация работает с включенным Autoscale в блоках
Модификация работает с Zero Block и стандартными блоками
Номер модификации в библиотеке TiCode
ID Zero Block
Ссылка на popup
Скролл при откртом popup
Затемнение фона
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD005--> <style>
#rec505036588 {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
}
.ticode-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
z-index: 1000;
display: none;
}
</style>
<script>
const TCDopenpopup = document.querySelector('a[href="#tc-popup"]');
const IDTCDpopup = document.querySelector('#rec505036588');
const TCDcloseButton = document.querySelector('a[href="#tc-close"]');
const TCDBackground = document.createElement('div');
TCDBackground.classList.add('ticode-background');
document.body.appendChild(TCDBackground);
const shouldBlockScroll = true;
function toggleBodyScroll(block) {
if (block) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = '';
}
}
function disableLazyLoad() {
const lazyImages = document.querySelectorAll('img.lazy-load');
lazyImages.forEach(img => {
img.loading = 'auto';
if (img.dataset.src) {
img.src = img.dataset.src;
}
});
}
TCDopenpopup.addEventListener('click', function(e) {
e.preventDefault();
IDTCDpopup.style.display = 'block';
TCDBackground.style.display = 'block';
if (shouldBlockScroll) {
toggleBodyScroll(true);
}
});
TCDcloseButton.addEventListener('click', function(e) {
e.preventDefault();
IDTCDpopup.style.display = 'none';
TCDBackground.style.display = 'none';
if (shouldBlockScroll) {
toggleBodyScroll(false);
}
});
TCDBackground.addEventListener('click', function() {
IDTCDpopup.style.display = 'none';
TCDBackground.style.display = 'none';
if (shouldBlockScroll) {
toggleBodyScroll(false);
}
});
</script>
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем Zero Block с прозрачным фоном и размещаем контент который буем показывать. Подложку блока по высоте подгоняем под размер контента и в настройках блока ставим открывать блок на 100% высоту с выравниванием по центру;
2. В зеро блоке создаем элемент который будет закрывать popup(это может быть кнопка, текст, шейп, картинка) и указываем ему ссылку #tc-close
3. Копируем id блока и вставляем в генератор кода в поле "ID Zero Block"
4. На сайте создаем кнопку или любой другой элемент(шейп, текст, картинку), который будет открывать popup и присваиваем ему ссылку #tc-popup
4. При необходимости указываем дополнительные настройки в генераторе:
Скролл при открытом popup - если включить, то при открытом popup можно будет продолжать скролить страницу;
Затемнение фона - указываем процент затемнение фона при открытом popup;
5. Копируем готовый код и вставляем HTML блок T123.
2. В зеро блоке создаем элемент который будет закрывать popup(это может быть кнопка, текст, шейп, картинка) и указываем ему ссылку #tc-close
3. Копируем id блока и вставляем в генератор кода в поле "ID Zero Block"
4. На сайте создаем кнопку или любой другой элемент(шейп, текст, картинку), который будет открывать popup и присваиваем ему ссылку #tc-popup
4. При необходимости указываем дополнительные настройки в генераторе:
Скролл при открытом popup - если включить, то при открытом popup можно будет продолжать скролить страницу;
Затемнение фона - указываем процент затемнение фона при открытом popup;
5. Копируем готовый код и вставляем HTML блок T123.
Popup Zero Block
