Как сделать всплывающее окно (Pop-Up) из Zero Block в Tilda Publishing

Введение

В этой статье мы поговорим о том, как создать всплывающее окно из Zero Block в Tilda Publishing.

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

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

Как создать всплывающее окно из Zero Block.

Итак, чтобы создать pop-up в tilda publishing, необходимо выполнить несколько подготовительных действий:

1. Создайте zero block. Этот блок будет открываться как всплывающее окно.
2. Отредактируйте zero block по своему усмотрению. Добавьте контент.
3. Сразу адаптируйте контент в зеро блоке под все размеры экранов.
4. Сохраните и выйдите из редактора zero block.
5. После этого нажмите на кнопку «+» под блоком, откроется библиотека блоков.
6. Нажмите на иконку поиска.
7. В открывшемся поле введите «BF503». Это pop-up блок.
8. Добавьте блок «BF503» на страницу.
9. В блоке «BF503» нажмите на кнопку «Контент».
10. В поле «Ссылка для popup» придумайте и пропишите ссылку. (Пример: #popupzero)
11. Сохраните изменения.
12. Зайдите в настройки этого блока.
13. Во вкладке «ширина» выберите желаемую ширину всплывающего окна.
14. Нажмите на кнопку «+» и добавьте любую кнопку, которая будет открывать всплывающее окно.
15.  Нажмите на кнопку «Контент» и пропишите такую же ссылку, как и в пункте под номером 7.

Мы создали зеро блок, который будет выступать в качестве всплывающего окна на вашем сайте в Tilda Publishing. А также стандартный блок «BF503» и кнопку, которая будет открывать наш pop-up. Обратите внимание на то, что вместо зеро блока можно использовать любой другой блок. Точно также, вместо стандартной кнопки можно использовать кнопку в zero block.

Как запустить всплывающее окно из Zero Block.

После подготовительных действий можно переходить к финальному шагу, чтобы на 100% реализовать всплывающее окно из Zero Block. Для этого следуйте инструкции:

1. После всех блоков на вашей странице, нажмите на кнопку «+».
2. В самом низу найдите пункт «Другое» и добавьте html блок.
3. Нажмите на кнопку «Контент».
4. Скопируйте и вставьте следующий код:

<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 = '#rec288543986';//ID Zero
var PopWindID = '#rec288544167';//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(){window.dispatchEvent(new Event('resize')); }, 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>

1. Сохраните изменения.
2. Зайдите в настройки зеро блока и внизу скопируйте его Id.
3. Вернитесь в html блок и вставьте id в строку 9 «//ID Zero».
4. Сохраните изменения.
5. Зайдите в настройки блока «BF503» и внизу скопируйте его Id.
6. Вернитесь в html блок и вставьте id в строку 10 «//ID PopUp окна BF503 ».
7. Сохраните изменения и опубликуйте страницу.

Следуйте нашим инструкциям, легко добавляйте и настраивайте всплывающие окна на своем сайте в Tilda.

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

Заключение.

Следуйте нашим инструкциям, легко добавляйте и настраивайте всплывающие окна на своем сайте в Tilda.

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

Узнайте, как сделать своё избранное в tilda и добавить его в zero block в нашей статье или на YouTube канале.