Как создать авторское popup окно в ZeroBlock с прозрачным фоном и своей кнопкой в Tilda

scalable

Good service for small business

Provide you accurate and live campaign. Scale your infrastructure with our simple service. Perfect for customer support or showing your interactive prototypes.

Tilda Publishing

The Future

Как создать авторское popup окно в ZeroBlock с прозрачным фоном и своей кнопкой в Tilda

1

Создали ZeroBlock

2

Создали popUp блок BF503 c шириной 100%

3

Создали кнопку со ссылкой, которая начинается с #popupzero
Например #popupzero-mywindow

4

Вставили код в блок Другое - Т123

Mo-ti Level Up

Видео инструкции по добавлению кода и работе с Zero Block.

Получить полное видео

Посмотреть все видео

Создаём обычный ZeroBlock со своими настройками, а затем делаем из него PopUp окно.
Длительность видео 32 минуты

Фрагмент видео

Библиотека для примера


<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(); $('.t396').trigger('displayChanged');
   });
   $(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>