Как сделать попап в Тильде из Zero block

Вы сможете создать полностью кастомизированный попап с уникальным дизайном и анимацией в Zero block и конструкторе Tilda.
  1. Добавить на страницу Zero блок и сделать свой дизайн всплывающего окна.
  2. Добавить блок BF503, в настройка блока задать ширину 100%. Весь контент удалить. Добавить свою ссылку для открытия окна, например: #my-pop-up.
  3. Добавить блок T123. Добавить код ниже. В коде есть комментарии. Заменить id Zero блока и id блока BF503 на свой.
  4. На страницу добавить кнопку. В кнопку добавить ссылку для открытия окна #my-pop-up.

<style>
  .my-popup {
    background: none !important;
    right: 0 !important;
    left: 0 !important;
  }

  .my-padding {
    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 = '#rec628065647';//ID Zero
var PopWindID = '#rec628066924';//ID PopUp окна BF503

   $(PopWindID + " .t-popup__container").addClass("my-popup").html($(ZeroPopID)).parent(".t-popup").addClass("my-padding");
   $('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>

Поделиться записью

Telegram
WhatsApp
VK
Facebook
Email

Рекомендуем