Что такое модальное окно на сайте

Знакомьтесь, модальное окно

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

Цель модального окна

Привлечь внимание пользователя
Получить данные от пользователя
Показать дополнительную информацию

Это работает

ConversionXL на 30% больше подписчиков
WP Beginner в 6 раз больше регистраций
Backlinko на 3% больше конверсия

И пользователи не жаловались

Стандартное окно
Простое окно
Удобное окно
Улучшенное окно

1. Стандартное окно

История

alert

confirm

prompt

showModalDialog

Safari Пример

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

Используйте плагин модального окна Bootstrap для JavaScript, чтобы добавить на свой сайт диалоговые окна для лайтбоксов, уведомлений пользователей или полностью настраиваемого контента.

Как это устроено

Прежде чем приступить к работе с модальным компонентом Bootstrap, обязательно прочтите следующее, поскольку параметры нашего меню недавно изменились.

Модальные окна создаются с помощью HTML, CSS и JavaScript. Они располагаются поверх всего остального в документе и удаляют прокрутку из <body> , так что вместо этого прокручивается модальное содержимое.
Клик по модальному «фону» автоматически закрывает модальный.
Bootstrap поддерживает только одно модальное окно за раз. Вложенные модальные окна не поддерживаются, поскольку мы считаем, что они неудобны для пользователей.
В модальных окнах используется position: fixed , что иногда может быть немного специфичным при его рендеринге. По возможности размещайте модальный HTML-код на верхнем уровне, чтобы избежать потенциального вмешательства со стороны других элементов. Вы, вероятно, столкнетесь с проблемами при вложении .modal в другой фиксированный элемент.
Еще раз, из-за position: fixed есть некоторые предостережения при использовании модальных окон на мобильных устройствах. См. нашу документацию по поддержке браузеров для получения дополнительной информации.
Из-за того, как HTML5 определяет свою семантику, атрибут HTML autofocus не действует в Bootstrap. модальные окна. Чтобы добиться того же эффекта, используйте собственный JavaScript:

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

Примеры

Модальные компоненты

Ниже приведен пример статического модального окна (это означает, что его position и display были переопределены). Включены модальный заголовок, модальное тело (требуется для padding ) и модальный нижний колонтитул (необязательно). Мы просим вас по возможности включать модальные заголовки с действиями по отклонению или предоставить другое явное действие по отклонению.

Заголовок модального окна

Здесь идет основной текст модального окна

Живая демонстрация

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

Заголовок модального окна

Уууу, вы читаете этот текст в модальном!

Статический фон

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

Заголовок модального окна

Я не закроюсь, если ты щелкнешь вне меня. Даже не пытайтесь нажимать клавишу выхода.

Прокрутка длинного контента

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

Заголовок модального окна

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

Вы также можете создать прокручиваемое модальное окно, которое позволяет прокручивать модальное тело, добавляя .modal-dialog-scrollable к .modal-dialog .

Заголовок модального окна

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

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

Центрование по вертикали

Добавьте .modal-dialog-centered к .modal-dialog для вертикального центрирования модального окна.

Заголовок модального окна

This is a vertically centered modal.

Заголовок модального окна

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

Всплывающие подсказки и всплывающие окна

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

Заголовок модального окна

Всплывающие окна в модальном окне

Эта кнопка вызывает всплывающее окно при нажатии.

Всплывающие подсказки в модальном окне

Эта ссылка и эта ссылка имеют всплывающие подсказки при наведении курсора.

Использование сетки

Используйте сеточную систему Bootstrap в модальном окне, вложив .container-fluid в .modal-body . Затем используйте обычные классы системы сетки, как и везде.

Сетки в модальных окнах

Изменяющееся модальное содержимое

У Вас есть несколько кнопок, которые запускают одно и то же модальное окно с немного разным содержимым? Используйте event.relatedTarget и HTML data-* атрибуты, чтобы изменять содержимое модального окна в зависимости от какая кнопка была нажата.

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

Новое сообщение

Переключение между модальными окнами

Модалка 1

Модалка 2

Изменение анимации

Переменная $modal-fade-transform определяет состояние преобразования .modal-dialog перед модальной плавной анимацией, переменная $modal-show-transform определяет преобразование .modal-dialog в конец модальной плавной анимации.

Если Вам нужна, например, анимация с увеличением, Вы можете установить $modal-fade-transform: scale(.8) .

Удаление анимации

Для модальных окон, которые просто появляются, а не исчезают при просмотре, удалите класс .fade из Вашей модальной разметки.

Динамические высоты

Если высота модального окна изменяется, пока он открыт, Вы должны вызвать myModal.handleUpdate() , чтобы скорректировать положение модального окна в случае появления полосы прокрутки.

Доступность

Не забудьте добавить aria-labelledby=". " , ссылаясь на Заголовок модального окна, в .modal . Кроме того, Вы можете дать описание Вашего модального диалога с помощью aria-describedby в .modal . Обратите внимание, что Вам не нужно добавлять role="dialog" , поскольку мы уже добавляем его через JavaScript..

Встраивание видео с YouTube

Встраивание видео YouTube в модальные окна требует дополнительного JavaScript не в Bootstrap для автоматической остановки воспроизведения и т.д. См. этот полезный пост о переполнении стека для получения дополнительной информации.

Дополнительные размеры

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

Размер	Класс	Максимальная ширина модального окна
Маленькое	.modal-sm	300px
По умочланию	нет	500px
Большое	.modal-lg	800px
Очень большое	.modal-xl	1140px

Наш модальный класс по умолчанию без модификатора представляет собой модальное окно «среднего» размера.

Очень большое модальное окно

Большое модальное окно

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

Полноэкранное модальное окно

Другое переопределение — это возможность вывести модальное окно, охватывающее область просмотра пользователя, доступное через классы модификаторов, которые помещаются в .modal-dialog .

Класс	Доступность
.modal-fullscreen	Всегда
.modal-fullscreen-sm-down	Меньше 576px
.modal-fullscreen-md-down	Меньше 768px
.modal-fullscreen-lg-down	Меньше 992px
.modal-fullscreen-xl-down	Меньше 1200px
.modal-fullscreen-xxl-down	Меньше 1400px

Полноэкранное модальное окно

Полноэкранный меньше sm

Полноэкранный меньше md

Полноэкранный меньше lg

Полноэкранный меньше xl

Полноэкранный меньше xxl

Переменные

Адаптивные полноэкранные модальные окна генерируются с помощью карты $breakpoints и цикла в scss/_modal.scss .

Использование

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

Через атрибуты данных

Переключение

Активируйте модальное окно без написания JavaScript. Установите data-bs-toggle="modal" на элемент контроллера, например кнопку, вместе с data-bs-target="#foo" или href="#foo" для нацеливания на конкретное модальное окно для переключения.

Отклонение

Отклонение может быть достигнуто с помощью атрибута data на кнопке внутри modal, как показано ниже:

или на кнопке за пределами modal с помощью data-bs-target , как показано ниже:

Через JavaScript

Создайте модальное окно с одной строкой JavaScript:

Параметры

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data-bs- , как в data-bs-backdrop="" .

Наименование	Тип	По умолчанию	Описание
backdrop	boolean or the string ‘static’	true	Включает элемент модального фона. В качестве альтернативы укажите static для фона, который не закрывает модальное окно при нажатии.
keyboard	boolean	true	Закрывает модальное окно при нажатии клавиши выхода.
focus	boolean	true	При инициализации фокусируется на модальном окне.

Методы

Асинхронные методы и переходы

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

Passing options

Активирует Ваш контент как модальное окно. Принимает необязательные параметры object .

toggle

Вручную переключает модальное окно. Возврат к вызывающей стороне до того, как модальное окно было фактически показано или скрыто (т.е. до того, как произойдет событие shown.bs.modal или hidden.bs.modal ).

Открывает модальное окно вручную. Возврат к вызывающей стороне до фактического отображения модального окна (т.е. до того, как произойдет событие shown.bs.modal ).

Also, you can pass a DOM element as an argument that can be received in the modal events (as the relatedTarget property).

Скрывает модальное окно вручную. Возврат к вызывающей стороне до того, как модальное окно было фактически скрыто (т.е. до того, как произойдет событие hidden.bs.modal ).

handleUpdate

Вручную скорректируйте положение модального окна, если высота модального окна изменяется, пока он открыт (то есть в случае появления полосы прокрутки).

dispose

Уничтожает элемент модальное окно. (Удаляет сохраненные данные в элементе DOM)

getInstance

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

getOrCreateInstance

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

События

Модальный класс Bootstrap предоставляет несколько событий для подключения к модальным функциям. Все модальные события запускаются в самом модальном окне (то есть в <div >).

Лучшие практики модальных окон. Компоненты дизайн системы

Меня зовут Андрей Насонов, я работаю UI/UX-дизайнером и руковожу дизайн-отделом. В 2008 году я начал заниматься графическим дизайном, а в 2015 году перешел в веб-дизайн. Я пишу полезные статьи про компоненты дизайн-систем, в которых делюсь опытом решения самых разных задач. Эта статья посвящена модальным окнам.

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

Я разделяю три отдельных компонента: модальное окно, диалоговое окно и немодальное окно. Они похожи, но имеют разное назначение и принципы работы.

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

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

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

Если при открытии сайта необходимо отобразить важную информацию, используйте другой компонент, который не будет прерывать путь пользователя и не будет перекрывать полезный контент. Например, поп-ап или баннер.

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

1 шаг — выбираем тип отчета и нажимаем «Сформировать». 2 шаг — наблюдаем за прогрессом формирования. 3 шаг — видим сообщение об успешно сформированном отчете и кнопку «Скачать».

1. Шапка. Необязательно
2. Прилипающий элемент. Необязательно
3Контент-часть. Обязательно
4. Подвал. Необязательно
5. Кнопка закрытия. Обязательно
6. Полоса прокрутки. Обязательно
7. Затемняющий слой. Обязательно
8. Кнопки переключения объектов. Необязательно

Шапка и подвал могут иметь дополнительные элементы.

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

Минимальная ширина модального окна — 400 px. Максимальная ширина не ограничена, но должна быть кратна 80 px (400, 480, 560, 640, 720, 800, 880, 960, 1040 и так далее).

При необходимости модальное окно может занимать всю ширину экрана, при этом кратность 80 px может не соблюдаться. Такое модальное окно также может иметь фиксированные отступы по бокам.

Размер окна зависит от контента, но я советую в рамках одного проекта не делать слишком много разных модальных окон — соблюдайте единообразие. Например, если окно содержит пару полей и кнопку действия, то вполне подойдет размер от 400 до 560 px. Если же вы показываете в модальном окне таблицу или другую объемную информацию, размер может варьироваться вплоть до всей ширины экрана.

Минимальная высота ограничена только высотой контента. Если в модальном окне динамически изменяется количество контента, модальное окно также динамически изменяет свою высоту.

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

Есть три размера отступов от блока с контентом до заголовка — 0 px, 8 px, 16 px

Размер подбирается дизайнером и зависит от контента и наличия прилипающих элементов.

Если под шапкой размещается элемент с большим визуальным весом или разделителем между шапкой и элементом, то можно выбрать отступ 16 px. Если же элемент имеет маленький визуальный вес и нет разделительной линии, можно использовать отступы 8 px или 0 px.

В данном примере рекомендуется использовать отступ 0 px, так как строка поиска не имеет разделительной линии между шапкой и поиском и имеет маленький визуальный вес.

Высота подвала — 96 px.

Ширина кнопок — 72 px. По высоте кнопка занимает всю высоту экрана.

Отступ от верхнего и нижнего края экрана до контейнера модального окна — 40 px.

Модальное окно всегда появляется в верхней части экрана.

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

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

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

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

1. Красная пунктирная линия — линия, где обрезается контент.
2. Желтый блок — область, которая не попадает в экран.

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

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

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

Еще один негативный сценарий — прокрутка работает только при наведении курсора на контейнер модального окна, а при наведении за границу контейнера прокрутка не работает.

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

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

Если же вы решите разместить несколько модальных окон друг над другом, пользователю придется закрывать каждое окно отдельно.

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

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

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

Родительская страница под модальным окном не прокручивается.

Во время прокрутки кнопка закрытия остается в видимой области экрана. Отступ от верхнего края экрана до кнопки закрытия — 16 px.

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

На MacOS используется системная плавающая полоса прокрутки.

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

При прокрутке модального окна шапка, подвал и другие элементы могут прилипать к верху и низу экрана как одновременно, так и по отдельности — на усмотрение дизайнера.

Прилипающие элементы во время прокрутки должны отделяться от контент-части однопиксельным разделителем.

В момент прилипания шапки, нижний отступ от заголовка до края контейнера равен верхнему отступу.

Шапка, подвал или любой другой элемент могут прилипать по условию.

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

Пример 2. Есть длинная форма создания сотрудника. Изначально подвал с кнопками «Создать» и «Отмена» не попадает в область просмотра. Пользователь прокручивает страницу и заполняет поля. После того как пользователь заполнил обязательные поля, подвал прилипает к краю экрана, давая понять, что все обязательные поля заполнены и теперь пользователь может создать сотрудника. Пользователю не обязательно прокручивать до конца модального окна, чтобы проверить, заполнил ли он все обязательные поля и нажать кнопку «Создать». Заполнение всех обязательных полей является условием, по которому прилипает элемент.

Всем привет

Описание

Использование

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

1 шаг — выбираем тип отчета и нажимаем «Сформировать».
2 шаг — наблюдаем за прогрессом формирования.
3 шаг — видим сообщение об успешно сформированном отчете и кнопку «Скачать».

Анатомия

1 Шапка. Необязательно
2 Прилипающий элемент. Необязательно
3 Контент-часть. Обязательно
4 Подвал. Необязательно
5 Кнопка закрытия. Обязательно
6 Полоса прокрутки. Обязательно
7 Затемняющий слой. Обязательно
8 Кнопки переключения объектов. Необязательно

Шапка и подвал могут иметь дополнительные элементы.

Размеры и отступы

Ширина

Высота

Шапка

Есть три размера отступов от блока с контентом до заголовка — 0 px, 8 px, 16 px

Размер подбирается дизайнером и зависит от контента и наличия прилипающих элементов.

Подвал

Высота подвала — 96 px.

Кнопки переключения объектов

Ширина кнопок — 72 px. По высоте кнопка занимает всю высоту экрана.

Отступы от контейнера

Отступ от верхнего и нижнего края экрана до контейнера модального окна — 40 px.

Расположение

Модальное окно всегда появляется в верхней части экрана.

Красная пунктирная линия — линия, где обрезается контент. Желтый блок — область, которая не попадает в экран.

Появление окна

Поведение при прокрутке

Родительская страница под модальным окном не прокручивается.

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

На MacOS используется системная плавающая полоса прокрутки.

Прокрутка без прилипания элементов

Прокрутка с прилипанием элементов

Прилипающие элементы во время прокрутки должны отделяться от контент-части однопиксельным разделителем.

В момент прилипания шапки, нижний отступ от заголовка до края контейнера равен верхнему отступу.

Прилипание по условию

Шапка, подвал или любой другой элемент могут прилипать по условию.

Переключение объектов

Если модальное окно используется для просмотра объектов из списка, оно может иметь кнопки переключения объектов. Это позволяет переходить к следующему и предыдущему объекту, не закрывая модальное окно и не возвращаясь к списку объектов.

Например, перед нами страница со списком сотрудников. По клику на вторую строку списка открывается модальное окно просмотра сотрудника № 2. В открывшемся модальном окне можно нажать на правую кнопку и перейти к сотруднику № 3, или на левую кнопку и перейти к сотруднику № 1, не закрывая модальное окно.

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

Такое же расположение используется в компоненте галереи, поддерживая консистентность дизайна.

При наведении курсора на правую кнопку она не перекрывает кнопку закрытия.

При зависании курсора над кнопкой закрытия, правая кнопка не принимает состояние наведения.

Заголовок

Заголовок модального окна должен иметь название процесса, который инициирует пользователь, быть кратким и отвечать на вопрос «Что происходит?»

Правильно
«Создание пользователя»
«Редактирование заказа»
«Добавление товара»

Неправильно
«Создать пользователя»
«Редактировать заказ»
«Добавить товар»

Если модальное окно используется как окно просмотра, в заголовке допустимо указывать название просматриваемого объекта. Например, вместо «Просмотр товара» можно указать само название товара — «Наушники Firehead G200».

Важно! Не путайте модальное окно и диалоговое окно. У диалоговых окон другой принцип формирования заголовков.

Заголовок модального окна должен совпадать по смыслу с текстом кнопки, которая его вызывает. Желательно использовать одни и те же формулировки.

Правильно
Кнопка «Создать пользователя»
Заголовок «Создание пользователя»

Кнопка «Редактировать»
Заголовок «Редактирование заказа»

Неправильно
Кнопка «Добавить»
Заголовок «Создание пользователя»

Кнопка «Редактировать»
Заголовок «Внесение изменений в заказ»

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

Если увеличить ширину окна не получается, сделайте заголовок в две строки. В момент прилипания шапки заголовок сократится до одной строки с многоточием в конце.

Избегайте кнопок со словом «Отмена». Если же основное предназначение модального окна — отмена чего-либо, то замените кнопку на «Отменить», а второстепенную кнопку, которая закрывает модальное окно, назовите «Назад».

Закрытие модального окна

Есть четыре способа закрыть модальное окно:
1. Нажать на кнопку закрытия.
2. Нажать на кнопку «Отмена» или альтернативную кнопку.
3. Нажать на затемнённый фон.
4. Нажать на клавишу Esc на клавиатуре.

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

Перейдя из модального окна на другую страницу и нажав кнопку «Назад», пользователь должен вернуться к открытому модальному окну, а не к странице, с которой оно было вызвано.

Исключения

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

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

Модальное окно не должно закрываться, если зажать ЛКМ в области модального окна и отпустить ЛКМ за ее пределами. Подобное происходит, когда пользователь выделяет текст, нажимая ЛКМ в модальном окне, а отпускает ЛКМ за ее пределами. Таким образом срабатывает нажатие на затемненный фон, и модальное окно закрывается.

Стилизация

1. Цвет контейнера Surface 600
2. Тень контейнера Down Elevation 900
3. Цвет затемнения фона Overlay 700
4. Заголовок H4, Mono A A900
5. Фон кнопки закрытия White A200, Blur 400
6. Цвет иконки кнопки закрытия White 500
7. Текст «Esc» кнопки закрытия Caption, White A800
8. Разделительная линия Mono A A100

Для затемнения фона модального окна лучше использовать темно-серый цвет (ближе к черному) с прозрачностью.

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

Работа с клавиатурой

При появлении модального окна фокус перемещается на кнопку закрытия.

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

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

Переключение фокуса зациклено. Если фокус находится на последнем элементе, нажатие на Tab переведет фокус на первый элемент модального окна. Если фокус находится на первом элементе, нажатие на Shift + Tab переведет фокус на последний элемент модального окна.

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

Если модальное окно используется для просмотра объектов из списка, переключение объектов работает по комбинации клавиш Ctrl + ← , →

Если модальное окно используется для заполнения формы, то нажатие на Enter может отправлять форму.

Если в модальном окне выводится список объектов, то фокус переключается по основным элементам модального окна клавишей Tab , а внутри списка — клавишами ↑ и ↓ . Это позволяет пропустить список и сразу перейти к следующему блоку. Иначе придется переключаться по всем объектам списка, прежде чем фокус переключится на нужный элемент.

Тултипы и подсказки

При наведении курсора на кнопки переключения, появляются тултипы с текстом « Ctrl + ← » или « Ctrl + → »

При наведении курсора на кнопку закрытия появляется тултип с текстом «Закрыть»

Спасибо!

Если статья вам понравилась, жмите клапс �� (можно несколько раз!). А если хотите узнать больше фишек — подписывайтесь, чтобы не пропустить новые статьи.

Что такое модальное окно на сайте

Знакомьтесь, модальное окно

Цель модального окна

Это работает

1. Стандартное окно

История

alert

confirm

prompt

Рекомендация Google

showModalDialog

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

Как это устроено

Примеры

Модальные компоненты

Заголовок модального окна

Живая демонстрация

Заголовок модального окна

Статический фон

Заголовок модального окна

Прокрутка длинного контента

Заголовок модального окна

Заголовок модального окна

Центрование по вертикали

Заголовок модального окна

Заголовок модального окна

Всплывающие подсказки и всплывающие окна

Заголовок модального окна

Всплывающие окна в модальном окне

Всплывающие подсказки в модальном окне

Использование сетки

Сетки в модальных окнах

Изменяющееся модальное содержимое

Новое сообщение

Переключение между модальными окнами

Модалка 1

Модалка 2

Изменение анимации

Удаление анимации

Динамические высоты

Доступность

Встраивание видео с YouTube

Дополнительные размеры

Очень большое модальное окно

Большое модальное окно

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

Полноэкранное модальное окно

Полноэкранное модальное окно

Полноэкранный меньше sm

Полноэкранный меньше md

Полноэкранный меньше lg

Полноэкранный меньше xl

Полноэкранный меньше xxl

Переменные

Использование

Через атрибуты данных

Переключение

Отклонение

Через JavaScript

Параметры

Методы

Асинхронные методы и переходы

Passing options

toggle

handleUpdate

dispose

getInstance

getOrCreateInstance

События

Лучшие практики модальных окон. Компоненты дизайн системы

Всем привет

Описание

Использование

Анатомия

Размеры и отступы

Ширина

Высота

Шапка

Подвал

Кнопки переключения объектов