Лайтбокс Modal

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

Лайтбокс (от англ. lightbox) — источник света большой площади. Излучает максимально ровный свет, равный по яркости по всей их поверхности.

Используется в виде носителей рекламы, в фотографии для просмотра отснятых слайдов, в медицине для просмотра МРТ- и рентгеновских снимков.

Где использовать

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

Не используйте лайтбокс для больших форм и мастеров.

Дизайн

Состав лайтбокса

Лайтбокс может состоять из:

  1. «Шапки» — заголовка и крестика

  2. Контент-зоны

  3. «Подвала» — или «терминальной зоны» с кнопками основных действий.

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

Заголовок лайтбокса

Как правило, лайтбокс предназначен для выполнения одной конкретной задачи, и она должна быть отражена 
в заголовке. Заголовок должен быть кратким (1-3 слова) и являться названием процесса или объекта.

Действия

Чаще всего в лайтбоксе есть минимум два терминальных (закрывающих лайтбокс) действия:

  1. Основное действие, представленное кнопкой, выделенной цветом, и имеющей больший визуальный вес, — «действие по умолчанию» — сохраняет проделанную работу или подтверждает вызванную ранее команду. Ни в коем случае не должна называться «ОК».
  2. Кнопка отмены — закрывает лайтбокс без сохранения введенных данных, называется «Отменить», не должна называться «Отмена».

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

Рекомендуем использовать такие плашки и в обычных формах.

Открытие лайтбокса

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

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

Закрытие лайтбокса

В правом верхнем углу лайтбокса всегда должна быть кнопка закрытия в виде крестика. Действие кнопки аналогично действию ссылки «Отменить». Также лайтбокс должен закрываться по нажатию клавиши Escape на клавиатуре.

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

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

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

Положение и размеры

По горизонтали лайтбокс позиционируется по центру. 
По вертикали — по центру и на 10% смещенным к верхней части окна браузера.

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

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

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

Несколько лайтбоксов на странице

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

Не должно быть большой вложенности лайтбоксов — чем меньше тем лучше.

Прокрутка и залипание

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

Прокрутка

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

Залипания

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

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

Следите за тем, чтобы контент страницы или лайтбокс не скакали при открытии и закрытии лайтбокса, или открытии новых лайтбоксов. Такое случается при появлении или исчезновении полосы прокрутки — с полосой прокрутки страница становится у́же.

Анимация

Анимация будет описана в отдельном разделе, посвященном анимации.

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

Примеры лайтбокса без терминальной плашки

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

Примеры лайтбокса с терминальной плашкой

Если текст заголовка нельзя сократить, он переносится на вторую строку, высота строки 30px крестик остается на месте.

Дополнительные кнопки и ссылки в терминальной плашке

Лайтбокс без заголовка

Информационный лайтбокс

Если лайтбокс не содержит контента, не следует использовать терминальную плашку.