Modal

Modal element (Модалка / Попап) — UI-компонент overlay-слоя: диалог, drawer, alert, bottom sheet. Анатомия: backdrop (затемнение), container (карточка), header, body, footer с кнопками. Стейты: открыт

Modal element (Модалка / Попап) — UI-компонент overlay-слоя: диалог, drawer, alert, bottom sheet. Анатомия: backdrop (затемнение), container (карточка), header, body, footer с кнопками. Стейты: открыт, закрыт, загрузка внутри, error. Поведение: закрытие по тапу на backdrop (для некритичных), блокировка закрытия для деструктивных действий. Сравнение с patterns/modal: этот хаб — об анатомии компонента, не о сценарии применения. Антипаттерн: модалка без aria-роли dialog и без управления фокусом — недоступна для screen reader.

Экран с разделом переводов, где пользователь может выбрать тип перевода: по России, за рубеж, из-за рубежа, на баланс телефона или на кошелёк. Отображается всп…
Экран с разделом переводов, где пользователь может выбрать тип перевода: по России, за рубеж, из-за рубежа, на баланс телефона или на кошелёк. Отображается всп…

Что покрывает эта подборка

Подборка screens с modal UI elements и overlay interactions. В подборке 74 экранов из 48 сценариев и 3 приложений. Репрезентативный пример: Мой МТС_52.Перевод на кошелёк_001.webp в сценарии Перевод на кошелёк приложения Мой МТС.

Контекст страницы

Семейство
Элементы интерфейса
Фокус
Modal
Экранов
74
Сценариев
48
Приложений
3

Семантический профиль

Семейство
Элементы интерфейса
Фокус
Modal
Экраны
74
Сценарии
48
Приложения
3

Путь пользователя

Намерение пользователя
Выбрать (select), 5
Этап воронки
Активация (activation), 2
Роль шага
Выбор (selection), 6

Паттерны и действия

Основное CTA
Выбрать (select), 6
Паттерн раскладки
Список (list), 5
Навигационный паттерн
Переход вглубь (drill_down), 10
Тема
Светлая тема (light), 7

Семантические сигналы

Типы экранов
Модальное окно (modal), Настройки (settings), Список (list), Детальная страница (detail)
Состояния экранов
Обычное состояние (default)
Основные CTA
Выбрать (select), Другое (other), Подтвердить (confirm)
Паттерны раскладки
Список (list), Модальное окно (modal), Нижняя шторка (bottom_sheet), Один главный фокус (single_focus)
Навигационные паттерны
Переход вглубь (drill_down), Без явной навигации (none)
Намерения пользователя
Выбрать (select), Управлять аккаунтом (manage_account), Просматривать (browse), Другое (other), Перейти на платный доступ (upgrade)
Этапы воронки
Активация (activation), Обнаружение (discovery), Восстановление (recovery), После конверсии (post_conversion), Оценка выбора (evaluation), Другое (other)
Темы
Светлая тема (light)
Роли шага
Выбор (selection), Промежуточный шаг (intermediate), Другое (other), Подтверждение (confirmation)

Элементы интерфейса

  • Модальное окно (modal) (ai_screen_type)
  • Настройки (settings) (ai_screen_type)
  • Список (list) (ai_screen_type)
  • Детальная страница (detail) (ai_screen_type)
  • Обычное состояние (default) (ai_screen_state)
  • Выбрать (select) (ai_primary_cta_type)
  • Другое (other) (ai_primary_cta_type)
  • Подтвердить (confirm) (ai_primary_cta_type)

Теги

  • переводы
  • финансы
  • платежи
  • перевод денег
  • выбор перевода
  • мобильный банк
  • деньги
  • переводы по россии
  • переводы за рубеж
  • баланс телефона
  • кошелёк
  • настройки

Ключевые действия

  • Закрыть меню (Кнопка (button))
  • Переводы по России (Кнопка (button))
  • За рубеж (Кнопка (button))
  • Из-за рубежа (Кнопка (button))
  • На баланс телефона (Кнопка (button))
  • На кошелёк (Кнопка (button))
  • Закрыть (Кнопка (button))
  • Закрыть (Кнопка (button))

Подходящие страницы