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

Итак, у нас настроен вид элементов и позиционирование всего на странице, но как мы будем открывать и закрывать лайтбокс?

Наверняка вы очень хорошо знаете, как ссылаться на элементы на той же странице с помощью атрибута ID (<a href="#lightbox-about">, где lightbox-about - идентификатор элемента). Однако вы можете не знать, что ссылка на элемент, который скрыт на странице, вызывает "вытягивание" элемента в область просмотра, а содержимое окна опускается под него.

Таким образом, мы изменяем значение href в наших ссылках на значения ID лайтбоксов и создаем новый элемент #close, который является ссылкой на кнопку для закрытия:

<ul id="lightboxes">

<li id="close"></li>

<li id="lightbox-about">

<div class="box">

<a href="#close" class="close" title="Закрыть окно">x</a> <h3>Заголовок подтемы</h3>

Вы не сможете протестировать страницу в данный момент, потому что пустой элемент #close располгается выше #container, не дает нажимать ни на какие другие элементы. Однако, если вы добавите ‘#lightbox-about’ в адресную строку браузера, то появится наш лайтбокс, а изменение на '#close' - уберет лайтбокс с экрана.

Теперь нам надо удалить фоновый цвет с элемента #close, чтобы он выглядел так, как будто здесь ничего нет, и позиционировать его позади элемента #container, чтобы мы могли нажимать на ссылки в #container.

Помните, что элемент #container позиционируется между элементами лайтбокса? Вот в чем заключается причина.

Следующий кусок CSS нужно добавить к стилю элемента #close:

#lightboxes #close {

background-color: transparent;

z-index: -1;}

Ещё в лайтбокс надо дообавить элемент с идентификатором "close" (выделен жирным шрифтом):

<ul id="lightboxes">

<li id="close"></li>

<li id="lightbox-about">

<div class="box">

<h3>Заголовок подтемы</h3>

Теперь можно открывать и закрывать лайтбокс.

Как это работает? Если вы не установите z-index для элемента, то он будет располагаться в зависимости от своего положения в коде. Следовательно, элементы лайтбокса <li> автоматически появляются выше контейнера, так как они располагаются дальше в разметке. Однако, задавая одному из них отрицательное значения z-index, мы размещаем его позади любого элемента, который ему предшествует в разметке.

Необязательная часть, т.к. лайтбоксы уже работают:

в данный момент в нашем контейнере не так много контента, таким образом он весь выводится на одну страницу и все прекрасно работает. Однако, если вы добавите несколько страниц контента, то обнаружите, что мы еще не все сделали. Появляется полоска прокрутки, которая позволяет прокручивать контент за границу лайтбокса и его перекрывающего слоя. Так происходит потому, что документ может прокручиваться, но лайтбокс имеет только 100% высоты окна, а не документа. Элемент #container также имеет 100% высоты окна, поэтому простым решением является переполнение контейнера, так что он будет прокручиваться вместо документа. Добавляем к стилю элемента #container:

overflow: auto;

Если теперь посмотреть на наш документ в Internet Explorer, то будет видно две полосы прокрутки. Одна для #container и недоступная полоса прокрутки для документа. Это легко поправить, добавив следующий код CSS в раздел для IE:

html {

overflow-y: auto;}