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

Форма лайтбокса выравнивается по центру контента. Фоновый оверлей кликабелен, по клику форма закрывается. Обязательный элемент формы – крестик закрытия (можно отключать, если форму нельзя закрыть).

Для лайтбоксов лучше использовать фиксированный набор ширины для консистентности. Для примера, форма размера S = 480px, M = 720px и т.д. Выбирать ширину нужно в зависимости от содержимого формы. Высота зависит от содержимого, на планшете и мобильном формы адаптируются под экран.

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

Десктоп

Лайтбокс - Десктоп

Планшет

Лайтбокс - Планшет

Смартфон

Лайтбокс - Смартфон

Прокрутка в лайтбоксе

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

Прокрутка в лайтбоксе

Комбинации лайтбоксов

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

Комбинации лайтбоксов

Комбинации с сайдпейджем

Лайтбоксы и сайдпейджи