Форма лайтбокса выравнивается по центру контента. Фоновый оверлей кликабелен, по клику форма закрывается. Обязательный элемент формы – крестик закрытия (можно отключать, если форму нельзя закрыть).
Для лайтбоксов лучше использовать фиксированный набор ширины для консистентности. Для примера, форма размера S = 480px
, M = 720px
и т.д. Выбирать ширину нужно в зависимости от содержимого формы. Высота зависит от содержимого, на планшете и мобильном формы адаптируются под экран.
Лайтбокс не должен иметь прокрутки. Для длинных форм нужно использовать сайдпейдж.
Десктоп
Планшет
Смартфон
Прокрутка в лайтбоксе
Если лайтбокс не входит на экран, то прокрутка не должна появляться внутри формы. Вся область оверлея должна прокручиваться, а прокрутка основной страницы блокироваться.
Комбинации лайтбоксов
Лайтбоксы не вкладываются друг в друга. Если избежать появления нескольких лайтбоксов нельзя, то они должны накладываться друг на друга вместе с оверлеем. При этом прокрутка (если она есть) работает только у самого верхнего лайтбокса, у остальных она заблокирована.