Размещение на сайте

Модальное окно

Обновлено

Модальное окно — форма, которая открывается поверх страницы. Как её вывести, разобрано в статье «Размещение на сайте»; здесь — про ширину и про открытие ссылкой.

Ширина окна

Задаётся настройкой формы. Но если тема передаёт свою ширину параметром при вызове хелпера, побеждает параметр темы: она лучше знает, куда встаёт окно на конкретной странице.

Открытие ссылкой с хэшем

Адрес с хэшем открывает модалку:

https://site.ru/page/#zakaz-zvonka

Это единственный способ открыть форму оттуда, куда нельзя вставить свой атрибут: из письма рассылки, из пункта меню темы, из кнопки чужого блока.

Работает в обоих случаях:

  • переход по ссылке извне — страница открывается сразу с хэшем;
  • клик на уже открытой странице — адрес меняется, окно открывается.

Служебный хэш

У каждой формы есть готовый хэш, который работает без всякой настройки:

#requests-modal-1

Число — номер формы.

Свой хэш

Читаемый адрес задаётся настройкой формы «Хэш модального окна» на вкладке «Встроить». Вместо #requests-modal-1 получится #zakaz-zvonka.

Кириллица допустима: браузер закодирует её процентами, приложение раскодирует обратно. Значение приводится к единому виду при сохранении, так что в адресной строке окажется ровно то, что вы видите в настройке.

Что происходит при закрытии

При закрытии окна хэш убирается из адреса — аккуратно, без добавления записи в историю. Это важно по двум причинам:

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

Посторонние якоря страницы при этом не трогаются — убирается только свой хэш.

Почему хэш именно requests-modal, а не requests-form

requests-form-1 — это идентификатор встроенной формы на странице. Если бы служебный хэш совпадал с ним, на странице, где есть и встроенная форма, и модалка, браузер прокручивал бы к встроенной вместо открытия окна.