О платформе

Тарифы

Загрузка...

Вход

Регистрация

Установить расширение

Апдейты

О НАС

КЛИЕНТАМ

РАБОТА

ПАРТНЁРАМ

СЛЕДИТЕ ЗА НАМИ

Главная

Тарифы

Отзывы

Модификации

Предложить идею

Заказать модификацию

Партнерская программа

ОТВЕТИМ НА ВОПРОСЫ
В ЧАТ-БОТЕ:

Вакансии

Сотрудничество

Расширение

Модификации

Профиль

дней

...

Апдейты

Установить расширение

Техподдержка

Время настройки: 2 минуты

Как в Zero Block сделать popup со своей кнопкой закрытия в Tilda

Модификация может сделать popup в Zero Block Tilda, указать любые элементы для его закрытия и настроить условия показа по дню недели и времени

Генератор кода

Видео инструкция

Пример

Открыть popup

К сожалению, сейчас доставка уже не работает

Продолжить заказ

Вы можете сделать заказ и мы обязательно перезвоним вам в рабочее время.

Инструкция (Развернуть↓)

Вариант #1 «При нажатии на элемент с ссылкой появляется popup»

1. Создаём popup в Zero Block:

Цвет фона - прозрачный.
Window container height - 100%
Шейп (на фон попапа), ширина и высота - 100%
Container - Window container
Выравнивание X - 0, Y - 0
Opacity (Прозрачность) - 35% или любое другое значение
Цвет #000000

Важно: Можете не создавать шейп для фона, а воспользоваться настройками в генераторе

2. Вставляем в генератор id Zero Block в котором сделали popup;

3. В генераторе указываем ссылку через хештег (Например #open), затем привязываем ее к элементу, который будет "вызывать" (открывать) popup;

4. В генераторе указываем класс для закрытия попапа, который будет привязан ко всем элементам, отвечающим за закрытие;

Что бы указать класс у элемента в Тильда , нажимаем на него правой кнопкой мыши и выбираем из списка предпоследнюю строку "Add CSS Class Name", далее, справа в настройках указываем тот же класс что и в генераторе;

5. Копируем сгенерированный HTML код и вставляем его в блок Т123;

Вариант #2 «Подключаем к блокам T183,T188 или T723»

1. Повторяем шаги из Варианта #1 c 1 по 4;

2. В блоках T183,T188 или T723 нажимаем "Контент" и вставляем ссылку которая будет "вызывать" (открывать) popup, такую же как в генераторе;

3. Копируем сгенерированный HTML код и вставляем его в блок Т123;

Id зеро блока

Ссылка для открытия popup

Класс для закрытия popup

Затемнение фона

Цвет

Непрозрачность

+ Добавить условия показа

До

Часовой пояс

Через сколько секунд показать popup

Копировать код<!-- Как в ZERO BLOCK сделать popup со своей кнопкой закрытия? --> 
    <!-- https://nolim.cc/zeropopup --> 
    <a href="#wopen" class="nolimpopupshow" style="display:none;"></a> <script> function checktime(o, e, c, l, t) { new Date; var i = new Array; i[0] = "Воскресенье", i[1] = "Понедельник", i[2] = "Вторник", i[3] = "Среда", i[4] = "Четверг", i[5] = "Пятница", i[6] = "Суббота"; var n = new Date, s = n.getUTCHours() + t, f = n.getDay(), r = 0; s>=24 && (s=s-24); for (let o = 0; o <= 6; o++) for (let c = 0; c < e.length; c++) i[o] == e[c] && f == o && (r = 1); 1 == r && (c == l && $(o + ".nolimpopupshow").click(), c < l ? s >= c && s <= l && $(o + ".nolimpopupshow").click() : s <= l && $(o + ".nolimpopupshow").click()) } $(document).ready(function() { var o = ["Понедельник"], e = "#rec282456840", c = '[href="#wopen"]'; $("#rec282456840" + " .t396__filter").click(function() { $("#rec282456840").fadeOut(), $("html").css("overflow", "visible"), $('.t-body').removeClass('nolimPopUp'); }), $('body').on('click', c, function() { $("#rec282456840").fadeIn(), $('.t-body').addClass('nolimPopUp'); $("html").css("overflow", "hidden"), "y" === window.lazy && t_lazyload_update(), typeof t_slds_updateSlider != "undefined" && t_slds_updateSlider('378170975'), t396_doResize('000000'); });$('[href="#wclose"]').addClass('nolim_popup_close').click(function() { $("#rec282456840").fadeOut(), $('.t-body').removeClass('nolimPopUp'); $("html").css("overflow", "visible"); }), setTimeout(function() { checktime(c, o, 12, 20, 3) }, 1000) });</script> <style> #rec282456840 .t396__filter, {cursor:pointer} #rec282456840{display:none;position:fixed;left:0;top:0;right:0;bottom:0;z-index:9999; overflow:auto;} #rec123 .t396:before { content:''; background-color: #00000060; position: fixed; width: 110%; height: 110%; } .nolimPopUp{height:100vh; min-height:100vh; overflow:visible!important;} </style>