Попап в зеро блоке на Тильда | Делаем уникальный POPUP в zero block на TILDA - полный кастом и код

Долгое время у подписчиков моего канала были вопросы, как сделать не просто вызов попапа из зеро блока, но и чтобы само всплывающее окно было сделано в zero block.

Изначально я пользовался триггерной анимацией, чтобы форма с заголовком и фоном появлялись при нажатии на кнопку. Но это оказалось не конструктивно, так как попап должен открываться в любом месте сайта, а не в единственном блоке.

Я выбрал более универсальное решение, которое требует кода. Код работает только на Тильда и связан с определённым всплывающим окном, которое синхронизируется с дизайном попапа в зеро блоке.

Выполните следующие действия:

1) Создайте зеро блок с кнопкой и установите на неё ссылку #popup:form1

2) Создайте зеро блок с формой

3) Создайте блок с формой BF503 и удалите всё содержимое из него, а в настройках установите 100% ширину блока

4) Добавьте блок 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 = '#rec571418389';//ID Zero
var PopWindID = '#rec571422388';//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>

Где var ZeroPopID = '#rec571418389'; - это id вашего блока с формой, его можно скопировать внизу в настройках блока. А var PopWindID = '#rec571422388'; - это id блока с формой BF503

5) Опубликуйте страницу и наслаждайтесь результатом.

P.S.: Не забудьте адаптировать форму обратной связи в зеро блоке под все устройства.

Задавайте ваши вопросы, если что-то непонятно, я обязательно отвечу.

Дизайн+4