Как создать PopUp окно в Tilda с помощью ZeroBlock

Привет, уважаемые пользователи Tilda! Сегодня мы рассмотрим пример того, как создать PopUp окно в Tilda с помощью Zero Block.

1. Создание Zero Block

Для начала добавьте Zero Block на страницу. Это будет основа для будущего PopUp окна.

2. Добавление PopUp блока BF503

Теперь найдите блок BF503 через поиск или в разделе "Форма и кнопка". Этот блок будет вашим PopUp. В настройках блока измените ширину на 100%, чтобы он занимал всю ширину экрана.

3. Добавление кнопки для вызова PopUp

Внутри Zero Block добавьте кнопку, которая будет запускать PopUp окно. Для этого нужно присвоить ей ссылку на ваш PopUp. В поле URL вставьте ссылку на PopUp блок (можно использовать якорь или ID блока).

В Zero Block добавляем кнопку.

Присваиваем ей ссылку вашего PopUp'a..

Вписывать эту ссылку в кнопку. Нажимаем на нее и находим поле URL

4. Добавление HTML-кода

Создайте еще один Zero Block — он будет содержать сам PopUp. Затем добавьте блок T123 (HTML-код) из раздела "Другое" и вставьте туда код, который отвечает за открытие PopUp окна.

Создаем еще один ZeroBlock. Это будет основа нашего PopUp'a.

5. Настройка идентификаторов (ID) блоков

Убедитесь, что вы корректно установили ID для ваших блоков. Найти ID можно в настройках нужного блока, в самом низу. Вам нужно будет указать ID Zero Block'а, в котором расположен ваш PopUp.

Меняем ID блоков на наши. ID Zero Block'a тот в котором делали PopUp.

После этого всплывающее окно будет готово, и вы сможете стилизовать его по своему вкусу.

Код для блока T123

<style> .shirina{ background:none !important; right: 0 !important;left: 0 !important;} .parpadding{padding:0 !important;} .tn-atom .t-form__errorbox-wrapper, .tn-form__errorbox-popup , .t-form-success-popup { z-index: 9999999 !important; } </style> <script>$( document ).ready(function() { var ZeroPopID = '#rec166004976';//ID Zero var PopWindID = '#rec166004978';//ID PopUp окна BF503 $(PopWindID + " .t-popup__container").addClass("shirina").html($(ZeroPopID)).parent(".t-popup").addClass("parpadding"); $('a[href^="#popupzero"]').click(function(e) {e.preventDefault(); setTimeout(function(){$(ZeroPopID+' .t396').trigger('displayChanged');}, 10); }); $(document).on('click','a[href="#close"], '+ZeroPopID+' .t396__filter',function(e){e.preventDefault();t390_closePopup(PopWindID.replace(/[^0-9]/gim, ""));}); $(ZeroPopID).delegate(".t-submit", "click", function(){ setTimeout(function(){if($(ZeroPopID+" .t-form").hasClass("js-send-form-success")){t390_closePopup(PopWindID.replace(/[^0-9]/gim, ""))}}, 1000);}); }); </script>