Popup со своей кнопкой закрытия в Зеро блоке

Вариант #1 «При нажатии на элемент с ссылкой появляется popup»

1. Создаём popup в Zero Block:

• Цвет фона — прозрачный.
• Window container height — 100%
• Шейп (на фон попапа), ширина и высота — 100%
• Container — Window container
• Выравнивание X — 0, Y — 0
• Opacity (Прозрачность) — 35% или любое другое значение
• Цвет #0

Имей в виду:

1. Можно не создавать шейп для фона, а воспользоваться настройками в генераторе;

2. Если не появляются изображения, отключи у них Lazy Load и переопубликуй страницу;

3. Вставляем в генератор id Zero Block в котором сделали popup;

4. В генераторе указываем ссылку через хештег (Например #open), затем привязываем ее к элементу, который будет «вызывать» (открывать) popup;

5. В генераторе указываем класс для закрытия попапа, который будет привязан ко всем элементам, отвечающим за закрытие;

Чтобы указать класс у элемента в Тильда, нажимаем на него правой кнопкой мыши и выбираем из списка предпоследнюю строку «Add CSS Class Name», далее, справа в настройках указываем тот же класс, что и в генераторе;

6. Копируем сгенерированный HTML код и вставляем его в блок Т123.


Вариант #2 «Подключаем к блокам T183, T188 или T723»

1. Повторяем шаги из Варианта #1 c 1 по 4;

2. В блоках T183, T188 или T723 нажимаем «Контент» и вставляем ссылку которая будет «вызывать» (открывать) popup, такую же как в генераторе;

3. Копируем сгенерированный HTML код и вставляем его в блок Т123.


Имейте в виду:

• Если у вас длинный поп-ап, то фон блока мы настраиваем не по window container, а по grid container — высоту задаем в пикселях, а также ставим overflow: hidden данному контейнеру.
• Если вы используете модификацию вместе с модификацией NLM001, и если зероблок с формой на телефоне длиннее по высоте, чем экран, вам нужно в настройках блока установить overflow-y на auto.
• Если форма или некоторые её поля не отображаются в поп-апе, включите опцию «Включите это, если в попапе не отображается форма».
• Если нужно автоматически закрывать поп‑ап при отправке формы (при использовании модификации вместе с NLM001), добавьте кнопке отправки класс для закрытия поп-апа. Учтите, что в таком случае поп‑ап закроется сразу после нажатия кнопки, даже если форма не заполнена. → Если такое поведение не подходит, а окно успешной отправки оказывается под формой, в настройках модификации увеличьте Z-index окна успеха (Z-index стандартной плашки должен быть выше, чем Z-index zero блока). Тогда окно успеха будет показываться поверх формы.