Как сделать попап с дизайном из Zero Block
Самый устойчивый путь — оставить открытие, затемнение, блокировку прокрутки и закрытие родному попапу Тильды, а внутри оформить нужную композицию. Не делайте окно простым Zero Block с position fixed: придётся заново решать фокус, клавишу Escape, мобильную высоту и конфликт с корзиной. Свой код нужен только для особого момента открытия или поведения после формы.
Короткий ответ
Создайте родной попап, поместите в него нужный контент и открывайте обычной ссылкой. Zero Block отвечает за композицию, Тильда — за поведение окна.
Почему не стоит рисовать fixed-слой с нуля
На макете всё просто: фон, карточка, крестик. В рабочем сайте добавляются вопросы:
- куда переходит фокус после открытия;
- закрывает ли окно Escape;
- можно ли прокручивать страницу под ним;
- что будет при открытой корзине;
- помещается ли форма при мобильной клавиатуре;
- возвращается ли посетитель к кнопке после закрытия.
Родная оболочка уже решает большую часть. Повторять её ради своего скругления невыгодно.
Ссылка на попап
Ставьте адрес открытия на настоящий кликабельный элемент. Если ссылка находится
в HTML блока T123, используйте обычный <a>, а не обработчик на случайном div.
Тогда остаются клавиатура, контекстное меню и ожидаемое поведение ссылки.
Автопоказ без раздражения
Попап при заходе не должен открываться на каждом переходе. Выберите одно правило: один раз за сессию, после осмысленной задержки или после определённого действия. На телефоне «курсор ушёл из окна» не существует, поэтому exit intent нельзя имитировать случайным скроллом вверх.
Форма внутри
Закрывайте окно только после подтверждённой успешной отправки. Клик по кнопке ещё не успех: может не пройти проверка, пропасть сеть или отказать интеграция. MOD-172 описывает этот сценарий и порядок слоёв, но пока остаётся спецификацией.
Проверка
Откройте попап клавиатурой и пальцем, пройдите форму с ошибкой и успехом, попробуйте открыть корзину и вернуться. После закрытия страница должна продолжать скроллиться, а фокус — не исчезать.