Как правильно открыть попап Тильды из своего блока
Родной попап Тильды открывается не поиском похожего адреса, а точным совпадением двух строк: `href` у ссылки и `data-tooltip-hook` у окна. Поэтому `#popup:consult`, `/page#popup:consult` и полный адрес сайта для браузера ведут примерно в одно место, но для обработчика являются разными значениями. В T123 безопаснее оставить обычную ссылку с коротким якорем и позволить Тильде самой открыть окно, удержать фокус и закрыть его.
Короткий ответ
Поставьте ссылке значение вида #popup:consult и такое же имя задайте попапу.
Строки должны совпадать полностью. Не превращайте якорь в
https://site.ru/page#popup:consult и не вызывайте внутреннюю функцию Тильды,
если требуется обычное открытие по кнопке.
Как устроена связь
На сохранённой странице из стенда кнопка выглядит так:
<a href="#popup:writing-an-article">Apply now</a>А окно T702 хранит тот же ключ:
<div class="t-popup"
data-tooltip-hook="#popup:writing-an-article"
role="dialog"
aria-modal="true">Связь — это равенство строк. Обработчику не надо понимать, что полный адрес и
короткий якорь в итоге относятся к одной странице. Он ищет ссылку с конкретным
href.
Четыре частые ошибки
1. В href добавили весь адрес
Нужно: #popup:consult
Плохо: /services#popup:consult
Плохо: https://site.ru/services#popup:consultПолный адрес полезен для обычной навигации, но не для родного хука попапа.
2. Имена отличаются одним символом
#popup:consultation и #popup:consult — разные ключи. То же относится к
дефисам, регистру, пробелам в конце и кириллице, которую один раз написали по-разному.
Для клиентских проектов используйте короткие латинские имена:
#popup:consult;#popup:brief;#popup:download.
3. Страницу скопировали, окно переименовали
После копирования дизайнер часто меняет название попапа, но кнопка остаётся со старым адресом. Проверьте все точки входа: меню, первый экран, карточки услуг и фиксированную кнопку.
4. T123 ищет окно слишком рано
Блок попапа может быть расположен ниже по странице и инициализироваться позже.
В сохранённой странице T702 запускается через t_onFuncLoad: Тильда сама ждёт
свою функцию t702_initPopup.
Скрипт вида document.querySelector(...).click() при первом чтении страницы
может не найти узел. Обычная ссылка устойчивее: действие произойдёт только после
реального клика посетителя, когда страница уже собрана.
Вариант для Zero Block и T123 без JavaScript
В Zero Block задайте кнопке ссылку #popup:consult. В T123 достаточно обычной
HTML-ссылки:
<a href="#popup:consult" class="my-button">Получить консультацию</a>Не добавляйте обработчик onclick, если он нужен только для открытия. Ссылка
остаётся понятной браузеру, а Тильда добавит своё поведение.
Когда всё-таки нужна модификация
Свой код оправдан, если надо не просто открыть окно, а связать несколько состояний:
- закрыть его только после успешной отправки формы;
- установить согласованный порядок относительно корзины;
- выбрать попап по данным карточки;
- сохранить доступный возврат фокуса.
Первые два сценария входят в спецификацию MOD-172. Само открытие
по #popup: модом не является — эту часть Тильда уже делает.
Проверка перед передачей
На опубликованном сайте:
- Откройте каждую кнопку, которая ведёт на попап.
- Проверьте крестик, клик по фону и Escape.
- Пройдите окно клавишей Tab.
- Закройте его и убедитесь, что фокус вернулся к кнопке.
- Повторите после копирования страницы и на телефоне.
В ведомости клиента запишите хук рядом с названием окна. Тогда при следующем копировании человек сравнит две строки, а не будет чинить рабочий попап новым JavaScript.