Одно из самых популярных направлений в веб-дизайне, появившееся за последние несколько лет создание сайтов, которые выглядят скорее как автономные приложения, чем традиционные сайты более ранней эпохи. Целью этих сайтов является использование передовых языков дизайна, таких как CSS3, HTML5 и JavaScript, для создания сайта, который может открывать окна, предоставляя новую информацию без обновления страницы, и приводить пользователя конца к цели с меньшим количеством отвлечений и меньшей путаницей.
Одним из ключевых инструментов в этом является лайтбокс. Иногда называемый «модальное окно» или «модальный диалог». Эти всплывающие окна изменили способ, которым посетители взаимодействуют с фотографиями, регистрационными формами, комментариями в блогах или продукцией, описанной в интернет-магазине.
Без сомнения, большинство людей, вероятно, уже видели лайтбокс в действии. Эти окна используются, возможно, даже слишком часто, когда просят клиентов или читателей блога высказать свое мнение о содержании сайта, дизайне или общей функциональности. В других случаях они используются, чтобы увеличить фото на блоге или в интернет-магазин, не открывая новую страницу или не инициируя обновления страницы. Фото просто загружается в полном размере во всплывающем окне. Некоторые сайты используют лайтбокс, для добавления продуктов в корзину покупок, не идя на сайт или страницу этого продукта.
Почему они называются «лайтбоксы», довольно ясно. Эти окна предназначены для устранения обновления страницы, представляя очень маленький объём информации в окне, которое появляется в верхней части существующего контента сайта, действуя наподобие ссылки, но никакого перехода при этом, конечно не происходит. При клике картинка становится полноразмерной. Для облегчения восприятия, они часто размывают или затемняют фон, так что акцент ложится исключительно на функции этого всплывающего окна.
Дизайнеры используют комбинацию CSS и JavaScript библиотек, чтобы сделать этот эффект реальности. Почти во всех случаях, лайтбокс просто вторичная веб-страница, с кодом JavaScript, загружаемая поверх существующей страницы, а не заставляющая посетителя перейти на эту страницу отдельно.