Почему попап в Тильде оказался под корзиной

Короткий ответ

Не начинайте с числа. Сначала определите четыре участника: попап, его затемнение, корзину и фиксированный хедер. Проверьте, какой из них должен быть сверху по сценарию клиента. После этого меняйте слой только у нужной записи, а не у всех .t-popup, .t706 и .t396 на странице.

Почему большое число не гарантирует верхний слой

Представьте не одну стопку листов, а несколько папок со своими стопками. z-index сортирует листы внутри папки. Если сама папка лежит под корзиной, число на листе не поднимет его выше другой папки.

Новый контекст наложения часто создают:

• position вместе с z-index у родителя;
• transform, даже если это только translateZ(0);
• прозрачность меньше единицы;
• filter, isolation и некоторые режимы смешивания;
• анимация, которая временно добавила transform.

В Zero Block такие свойства встречаются постоянно. Поэтому увеличение слоя у кнопки или формы внутри артборда может ничего не изменить относительно корзины.

Сначала решите, что должно происходить

У проекта может быть три нормальных сценария:

1. Информационный попап открывается поверх страницы, но ниже корзины.
2. Важное подтверждение открывается поверх корзины и блокирует её до ответа.
3. После формы попап закрывается, а посетитель переходит к оплате.

Это разные задачи. Фраза «поднять попап» без описания сценария не говорит, должен ли посетитель видеть корзину и что получит фокус после закрытия.

Для клиентского проекта запишите одной строкой: «Окно консультации ниже корзины; окно обязательного согласия выше корзины; после успешной заявки окно закрывается». По этой строке решение можно проверить, а по числу 999999 — нельзя.

Проверка без кода

Откройте опубликованный сайт в приватном окне и пройдите последовательность:

1. Откройте попап его обычной кнопкой.
2. Откройте корзину тем способом, которым пользуется посетитель.
3. Нажмите Tab несколько раз и проверьте, в каком окне находится фокус.
4. Закройте верхнее окно клавишей Escape и кнопкой-крестиком.
5. Проверьте тот же путь на телефоне.

Если визуально сверху одно окно, а клавиатура работает в другом, проблема уже не косметическая. Нельзя исправлять только слой: надо сохранить родной цикл открытия и закрытия.

Что Тильда уже делает сама

Модуль tilda-popup-1.0.min.js:

• показывает .t-popup и добавляет ему t-popup_show;
• удерживает клавиатурный фокус внутри открытого окна;
• закрывает окно и снимает служебные классы с body;
• возвращает фокус к кнопке, которая открыла попап;
• сообщает об открытии и закрытии событиями popupShowed и popupHidden.

Zero Block внутри попапа тоже не считается обычной секцией. В его рантайме есть отдельные функции ожидания попапа и пересчёта открытого артборда. Поэтому перенос разметки окна в другое место DOM ради слоя — рискованная идея: можно починить картинку и сломать размеры или фокус.

Где заканчиваются настройки и начинается мод

Если конфликт создаёт один случайный стиль в Zero Block, достаточно убрать этот стиль. Модификация нужна, когда проекту требуется устойчивое правило между разными системами: пользовательским попапом, фиксированным меню и корзиной.

MOD-172 спроектирован именно для узкой границы:

• размечается только нужный попап;
• слой корзины и системных окон не переписывается;
• окно закрывается только после подтверждённой отправки формы;
• фокус и прокрутка остаются под управлением Тильды.

MOD-172 уже собран: параметр слоя применяется только к размеченному попапу, а закрытие слушает подтверждённое событие tildaform:aftersuccess. Глобальный CSS для всех окон по-прежнему не нужен.

Что записать при передаче клиенту

В ведомости модификаций укажите:

• какая кнопка открывает окно;
• id записи попапа;
• должен он быть выше или ниже корзины;
• есть ли внутри форма;
• что происходит после успешной отправки;
• как проверить клавиатуру и мобильную версию.

Тогда следующая правка меню или корзины не превратится в повторный поиск самого большого z-index.