Как лучше реализовать попап или модальное окно в мобильной версии сайта: по центру или снизу?

Что проверяют

Умеете ли вы принимать интерфейсное решение по аргументам, а не по вкусу, и знаете ли, что стоит за реализацией на мобильных. Следом обычно просят рассказать, как сделать такое окно доступным и почему страница под ним прокручивается.

Как отвечать

Начните с того, что единственно правильного ответа нет, есть назначение окна:

• нижний лист (bottom sheet): для действий, выбора варианта, фильтров, меню. Кнопки оказываются в зоне большого пальца, лист естественно закрывается свайпом вниз, контент может расти по высоте. Это привычный паттерн iOS и Android;
• окно по центру: для коротких подтверждений и критичных решений вроде «Удалить аккаунт?». Оно сильнее прерывает пользователя, и здесь это уместно;
• полный экран: для длинных форм. Центрированное окно с формой на телефоне почти всегда хуже.

Затем реализация, на ней и проверяют фронтендера:

• высота: вместо 100vh берите 100dvh, иначе панель браузера обрежет низ листа; отступ снизу через env(safe-area-inset-bottom) при viewport-fit=cover;
• прокрутка фона: блокировать её на body, а сквозной скролл гасить через overscroll-behavior: contain на самом листе;
• доступность: нативный <dialog> с showModal() переносит фокус внутрь, закрывается по Esc и делает фон инертным; своему компоненту нужны role="dialog", aria-modal="true", ловушка фокуса и возврат фокуса на кнопку, открывшую окно;
• клавиатура: при фокусе в поле ввода экранная клавиатура поднимает контент, нижний лист должен это пережить.

Где спотыкаются

Отвечают «снизу, потому что так модно» и не называют критерий. Интервьюеру важен ход мысли: тип действия, объём контента, частота.

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

Забывают про 100vh в мобильном Safari и блокировку прокрутки: окно уезжает под панель браузера, а страница скроллится под ним.