CSS3 Lightbox

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

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

Шаг 1: HTML

Вот HTML-код всплывающего окна lightbox:

<div class="lightbox" id="lightbox1">
  <div class="lightbox-content">
    <a href="#" class="lightbox-close">Закрыть</a>
    <h2>Это заголовок</h2>
    <p class="mb-0">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
      eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
      reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
      pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
      qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

Итак, мы имеем класс lightbox. Это основной контейнер. Мы будем использовать его для создания эффекта полупрозрачного затемнения страницы при открытии модального окна. Также, обратите внимание, он имеет идентификатор lightbox1. Если у нас будет несколько lightbox-ов на одной странице, мы будем использовать идентификаторы для их идентификации. Внутри у нас есть div с классом lightbox-content. Это и естьсамо окно – белый блок в центре страницы. Внутри него находится ссылка "закрыть", без которой мы не "закроем" окно. Так что не забывайте про нее.

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

Porttitor lacus, sociis adipiscing, vel et et, phasellus, a placerat 
tincidunt <a href="#lightbox1">sit rhoncus</a>, odio massa a, porttitor. 
Dapibus? Nisi sed sed parturient vut, in tristique, dictumst amet.

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

Шаг 2: CSS

Он на самом деле предельно прост. Там div с "position: fixed", который в обычном состоянии скрыт. Затем, когда к URL добавляется #lightbox[num], lightbox с соответствующим id будет открыт. Кроме того, не забудьте подключить CSS reset от Эрика Мейера или тот, которым вы пользуетесь. Например, Bootstrap Reboot.

.lightbox {
  background: rgba(0, 0, 0, .75);
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#lightbox1:target  {
  visibility: visible;
  opacity: 1;
  transition: opacity .5s ease;
}

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

body {
  color: #555;
  font-size: 1rem;
  position: relative;
}

.lightbox-content {
  padding: 2rem;
  width: 600px;
  background: #fff;
  border-radius: 1rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

a.lightbox-close {
  color: #666;
  font-size: .75rem;
  text-decoration: none;
  position: absolute;
  top: .75rem;
  right: 1.5rem;
}

Как видим, получилось и компактно и доступно. Работа нашего лайтбокса основана на использовании CSS-селектора :target. Работает это следующим образом:

• В дефолтном состоянии и фон и модальное окно скрыты.
• При клике по ссылке, у которой атрибут href указывает на div с модальным окном, этот div становится текущим активным target-элементом. При этом задействуется стиль #lightbox1:target, который активирует наш div с модальным окном.

Все довольно просто и наглядно. Если вы сторонник решений в “спартанском” стиле, этот трюк точно для вас. Недостаток я вижу только один – окно закрывается только кликом по ссылке “закрыть”. Клавиатурный ESC или клик по свободной зоне будут работать только при использовании джавы.

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