Как работает модальное окно

Вёрстка модальных окон

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

Новые модальные окна

Новые модальные окна имеют очень простой синтаксис HTML:

Для отображения модального окна, необходимо добавить атрибут open

К сожалению, обойтись совсем без JavaScript здесь невозможно, поэтому далее я приведу пример кода, который минимизирует ваше взаимодействие с JavaScript. Мы можем использовать DATA-атрибуты для задания идентификатора модального окна, которое будет перехватываться JavaScript. Работать с этим просто:

Здесь, в атрибуте data-modal , мы задаем идентификатор модального окна. А далее, в кнопке, позволяющей показать модальное окно, используя атрибут data-modal-open , мы говорим, что эта кнопка показывает модальное окно с нашим идентификатором.

Простое решение может выглядеть примерно так:

Стилизация

Модальное окно, открытое с помощью dialog.openModal() , имеет псевдоэлемент ::backdrop . Этот элемент является подложкой под модальным окном и растянут на весь экран. Обычно этот элемент красят в прозрачно-чёрный цвет и добавляют к нему backdrop-filter . Этот набор фильтров позволяет, например, размыть всю страницу кроме модального окна для создания акцента на окно.

Кроме того, можно добавить эффект появления модального окна. Для этого можно добавить немного CSS-кода:

Этот код позволит модальному окну плавно появляться на экране.

Рассмотренный выше способ в 2019 году работает далеко не во всех браузерах. Поддержку этого способа браузерами можно посмотреть здесь: Can i use Dialog element?

Универсальные модальные окна

Что делать, если нужно поддерживать большее количество браузеров? Выход один — использовать старые методы. Код будет не так изящен, зато работать будет везде.

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

Конечно же, придётся добавить много стилей:

.modal <
/* Подложка будет занимать 100% площади экрана*/
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100vh;
z-index: 1000;
/* Скрываем подложку с модальным окном*/
display: none;
/* Overflow позволит нам скроллить модальное окно, если контента в нём будет больше, чем может поместиться на экране */
overflow-y: auto;
/* Цвет подложки */
background: rgba(0, 0, 0, 0.8);
/* Размытие фона */
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
/* Анимация появления */
animation: fadeIn 250ms ease-in-out;
/* Добавляем дополнительные стили */
align-items: flex-start;
justify-content: center;
padding: 5vh 0 10vh;
/* Через JavaScript мы будем добавлять атрибут open, что должно сделать модальное окно видимым*/
>
.modal[open] <
display: flex;
>
.modal .dialog <
/* Стилизуем само модальное окно */
width: 100%;
max-width: 960px;
min-height: 100px;
border-radius: 4px;
position: relative;
border: none;
color: white;
font-weight: 300;
>
.modal .dialog .dialog-close <
/* Стилизуем кнопку закрытия модального окна */
position: absolute;
top: 0;
right: 0;
width: 3em;
height: 3em;
background: none;
border: none;
cursor: pointer;
outline: none;
>
.modal .dialog .dialog-close::before,
.modal .dialog .dialog-close::after <
content: «»;
display: block;
position: absolute;
top: 50%;
right: 5px;
left: 5px;
border-bottom: 1px solid white;
transform: rotate(45deg);
>
.modal .dialog .dialog-close::after <
transform: rotate(-45deg);
>
.modal .dialog .dialog-close:focus::before,
.modal .dialog .dialog-close:hover::before,
.modal .dialog .dialog-close:focus::after,
.modal .dialog .dialog-close:hover::after <
border-color: tomato;
>
.modal .dialog .dialog-content <
/* Дополнительные стили для контента*/
padding: 2em;
background-color: rgba(0, 0, 0, 0.6);
border: none;
>
/* Анимация появления*/
@keyframes fadeIn <
from <
opacity: 0;
>
to <
opacity: 1;
>
>

Далее сложно: JavaScript. Чтобы уменьшить количество вашего взаимодействия с JavaScript, был снова сделан модуль, работающий через DATA-атрибуты. Всё, как и в предыдущий раз. С ним можно ознакомиться в коде примера:

Не изобретай велосипед

Часто, лучшим способом является не создание собственного «велосипеда», а использование уже готового продукта. Модальные окна здесь не исключение. Можно просто найти хороший модуль модальных окон, прочитать к нему документацию и использовать его. Тогда практически не придется задумываться насчёт JavaScript и вёрстки окна. Примером могут послужить Tingle или Micromodal .

Источник

Использование модальных окон в пользовательских интерфейсах

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

В этой статье мы постараемся изучить общий стандарт модальности в пользовательских интерфейсах, и обсудить причину, по которой существуют лишь два основных типа экранов, а также проанализировать, как приложения и веб-сайты терпят неудачу при преобразовании информационных архитектур и пользовательских потоков в интуитивно понятные пользовательские интерфейсы.

Начнем это исследование со следующего смелого утверждения:

Существует два типа экранов:

1. Модальные экраны
2. Немодальные экраны

А теперь позвольте объяснить это утверждение. Практически каждый экран, который мы можем себе представить, попадает в одну из этих двух категорий. Чтобы понять, чем отличается модальный экран от немодального экрана, мы сначала должны перейти к определению понятия модального экрана.

Что такое «модальный экран»?

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

• Полноэкранные модальные виды
• Всплывающие окна
• Поп-апы
• Лайтбоксы

Как модальные экраны, так и немодальные экраны являются дочерними представлениями, то есть они подчинены одному главному окну приложения. Однако, существует одно важное отличие:

«Модальное окно создает режим, который отключает главное окно, но сохраняет его видимым с модальным окном в виде дочернего окна перед ним. Пользователи должны повзаимодействовать с модальным окном, прежде чем они смогут вернуться в родительское приложение» — Википедия

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

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

Пример iOS: модальные окна на мобильных устройствах часто полностью скрывают главное окно приложения.

Основное различие заключается в способе взаимодействия с каждым из окон. В то время как немодальный экран позволяет пользователям вернуться к родительскому экрану, модальный экран требует, чтобы пользователи завершили определённое действие, прежде чем вернуться в главное окно (такое как нажатие кнопки «Сохранить» в нашем примере) или отменить текущее действие, вызвавшее модальное окно.

Наиболее ярким визуальным индикатором для немодальных окон является навигация (панель вкладок в нашем примере). Немодальные экраны позволяют пользователям переходить назад и вперед на основном уровне навигации приложения.

Модальный же экран требует, чтобы пользователи закрывали окно, прежде чем они снова смогут использовать основную навигацию приложения (Кнопки «Сохранить» или «Отмена» в нашем примере).

Почему следует использовать модальность?

«Модальность создает фокусировку, не давая людям заниматься другими делами, прежде чем они не завершат задачу или не отклонят вызванное в модальном окне представление» — Apple

Когда следует использовать модальность?

Теперь, когда мы знаем, как выглядит модальный экран. Как же сравнить его с немодальным экраном и какова его цель? Прежде всего мы должны спросить себя: «В какой ситуации мы должны его использовать?»

Давайте представим, что мы создаем «гениальный и инновационный» стартап под названием «Purrrfect». Это база данных котят, которая позволяет пользователям загружать, просматривать и комментировать GIF-изображения милых котяток.

Упрощенный пользовательский поток нашего приложения может выглядеть следующим образом: пользователь открывает приложение и входит в одну из нескольких доступных вкладок (наша база данных о котятах), затем нажимает на одного из котят (входит в подробное представление одного котёнка) и затем нажимает на раздел комментариев (входит в раздел комментариев представления котёнка).

Пользовательский поток приложения «Purrrfect»

Кроме того, пользователь может выполнять дополнительные действия на каждом из этапов. Например, он может добавить другого котёнка в базу данных на экране списка котят. Или он может редактировать данные на экране подробностей котенка.

А теперь надо понять, какой из этих экранов является модальным, а какой нет? Классификация в данном случае вызывает сложность, но вот моё личное эмпирическое правило:

Используйте модальные экраны для автономных процессов, а немодальные экраны для всего остального.

«Автономный процесс» — это конкретное действие, которое имеет четкую начальную и конечную точку в процессе.

В течение ограниченного периода времени этого действия он выводит пользователя из общего потока пользователя, позволяя ему сосредоточиться на действии и затем возвращает его в ту точку потока, откуда он начал это действие.

Google формулирует это правило следующим образом:

Используйте модальные экраны (диалоги) для отображения «критической информации, которая требует конкретной пользовательской задачи, её решения или подтверждения» — Google

В случае нашего приложения «Purrrfect» это означает, что основной поток пользователя (используемый для исследования приложения) не является модальным. Однако специальные ограниченные по времени действия, такие как добавление котят, редактирование котят и написание комментариев, являются модальными.

Все модальные действия могут быть отменены либо успешно завершены, прежде чем пользователь вернется в основной поток. По этой причине модальные экраны используют кнопки «Отмена» и «Сохранить» (или другие подобные подтверждения действия) вместо кнопки «Назад». Если ваша кнопка «Назад» одновременно запускает действие сохранения на немодальном экране, вы можете рассмотреть возможность перехода на модальный экран, добавив кнопки «Отмена» и «Сохранить».

Однако верно и следующее утверждение: если два разных действия, таких как «Отмена» и «Сохранить», не имеют смысла на вашем модальном экране (потому что они вызовут одно и то же действие), вы можете переключиться на немодальное представление. В этом случае основная навигация (например, панель вкладок) также должна оставаться видимой на экране.

Давайте вернемся к нашему приложению. Возможный интерфейс для «Purrrfect» может выглядеть так:

Пользовательский интерфейс «Purrrfect»

В реальном мире различие между модальными и немодальными экранами зачастую менее очевидно. Например, полноэкранный вид изображения является модальным в большинстве приложений, хотя это не процесс или диалог. Модальный экран может также иметь смысл в других особых ситуациях, когда нужно генерировать фокус пользователя на определенном блоке информации. Если бы наш подробный экран котёнка (в центре) был конечной точкой без других действий, таких как редактирование или комментарии, мы могли бы использовать модальность (полноэкранный просмотр). Но так как он позволяет пользователям глубже переходить по информационной архитектуре и выполнять различные дополнительные действия (показывать комментарии, редактировать и т.п.), у него больше нет чёткой конечной точки, и поэтому он является частью основного потока. Следовательно, это немодальное представление.

Разработчик обязан оценить, является ли действие автономным или частью общего процесса потока приложения, и решить, делать экран модальным или нет. В случае возникновения сомнений, вспоминайте эту цитату:

Минимизируйте использование модальности. Как правило, люди предпочитают взаимодействовать с приложениями нелинейными способами. Рассматривайте возможность создания модального контекста только в тех случаях, когда важно привлечь чье-либо внимание, когда задача должна быть завершена или прекращена, чтобы продолжить использование приложения или сохранить важные данные. — Apple

Конечно, интерфейс может прекрасно работать без строгого различия между модальным и немодальным представлениями. Тем не менее, концепция модальности глубоко заложена в интерфейсных экосистемах Apple, Google, Microsoft и других компаний, которые разработали соответствующие ожидания для своих постоянных пользователей.

Как следует использовать модальность?

К настоящему времени надеюсь что возникло общее понимание того, когда использовать модальность. Остается только один вопрос: «Как мы спроектируем модальность?». Вот быстрый чеклист для использования модальных экранов:

• Всегда показывайте кнопку закрытия/скрытия модального окна (или «отмена», «отменить», «свернуть») в верхней панели навигации. Когда пользователь теряется, он может легко закрыть такое окно и вернуться на уровень приложения, откуда было вызвано модальное окно.
• Кнопки отмены на iOS и Android чаще всего располагаются в верхней левой части панели навигации. Android предпочитает иконку закрытия «X», в то время как iOS предпочитает кнопку с надписью «Отмена». Тем не менее, кнопки иконок также довольно распространен и в iOS.
• Кнопки подтверждения действия на модальном окне в iOS и Android по умолчанию расположены в верхней правой части панели навигации. Тем не менее, это размещение может быть недоступным для пользователя на устройствах с большой диагональю. Поэтому фиксированное плавающее размещение такого в нижней части экрана или в конце страницы может быть неплохим альтернативным решением.

Многоступенчатые модальные окна

Все становится сложнее, как только модальное диалоговое окно состоит из нескольких шагов или дочерних экранов. По умолчанию, кнопка продолжения действия отображается в правом верхнем углу. Экран второго шага не откроет новый модальный экран, но вместо этого остается внутри первого модального экрана и отображается как немодальный дочерний экран (так как не имеет возможности быть отменённым) существующего модального наложения в виде первого шага модального окна.

При размещении основного действия («сохранить», «применить» или «продолжить») в нижней части экрана (как было рекомендовано ранее) в верхней правой области второго шага модального блока всегда освобождается место для дополнительной кнопки отмены. Хотя перемещение выглядит более логичным слева направо, это размещение все же лучше для модального окна, чем отсутствие возможности закрывать модальный экран на дочерних (предшествующих) экранах.

Источник