В данном уроке мы разберем процесс создания лайтбокса с использованием только XHTML и CSS. Полученный код будет работать в Firefox, Opera, Chrome, Safari, IE6, IE7 и IE8.
Шаг 1. Пишем разметку.
<div id="container">
<div id="header">
<h1>Лайтбокс на XHTML & CSS (без использования JavaScript)</h1>
<p>
<strong>
Разработчик: <a href="http://twitter.com/jjenzz" target="_blank">Jenna Smith</a> /
Исправления для OPERA: <a href="http://www.3d4x.ch/" target="_blank">Tobias Wiersch</a> /
Перевод на русский язык: команда <a href="http://www.ruseller.com/" target="_blank">сайта RUSELLER.COM</a>
</strong>
</p>
</div>
<div id="content">
<h2>Нажмите на ссылки в тексте ниже, чтобы увидеть лайтбокс в действии</h2>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit.
Donec massa lorem, elementum et mollis non, viverra a est.Aliquam eget tellus risus.</p>
<p>Proin <a href="#">sollicitudin</a>elementum sem id pulvinar.
Duis nec est at mi condimentum consequat sed vitae metus. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.</p>
</div>
<div id="footer">
<p>Copyright <a href="http://twitter.com/jjenzz" target="_blank">Jenna Smith</a></p>
<p>Перевод на русский язык: команда <a href="http://www.ruseller.com/" target="_blank">сайта RUSELLER.COM</a></p>
</div>
</div>
Разметка очень простая. На данном этапе у нас есть две ссылки, которые ведут в никуда. Данные ссылки в конечном итоге будут использоваться для включения лайтбоксов, но сначала нам нужно добавить разметку для этих лайтбоксов после контейнера <div>:
<ul id="lightboxes">
<li id="lightbox-about">
<div class="box">
<h3>Заголовок подтемы</h3>
<p>
Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.
</p>
</div>
</li>
<li id="lightbox-more">
<div class="box">
<h3>Заголовок текста в лайтбоксе</h3>
<p>
Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.
</p>
</div>
</li>
</ul>
Такая разметка выбрана только для данного урока. Она позволяет сделать CSS достаточно простым и наглядным. В реальных проектах все можно изменять так, как того требует дизайн интерфейса.
Шаг 2. Делаем страницу симпатичнее
Добавим следующий код CSS в секцию <head> вашего документа (встроенный CSS используется только для наглядности в рамках урока):
html {
font-size: 75%;}
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;}
body {
background-color: #f8f8f8;
font-family: arial, helvetica, sans-serif;
color: #777;
text-align: center;
font-size: 1.0833em;
line-height: 1.6923em;}
a {
color: #09F;}
h2 {
font-weight: normal;}
p {
margin: 0 0 1.6923em 0;}
#container {
width: 100%;
height: 100%;}
#header,
#content,
#footer {
text-align: left;
width: 870px;
margin: 0 auto;
padding: 40px;}
#header,
#footer {
background-color: #eee;}
#header h1 {
margin: 0;}
#header p {
margin: 5px 0 0;}
#content {
background-color: #fff;}
/* ---------------------------------------------------------- */
/* Лайтбоксы
/* ---------------------------------------------------------- */
#lightboxes {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;}
#lightboxes li {
width: 100%;
height: 9999px;
position: relative;
background: rgba(0,0,0,.5);}
#lightboxes .box {
position: absolute;
width: 400px;
height: 400px;
left: 50%;
top: 50px;
border: 10px solid #999;
margin-left: -230px;
background-color: #fff;
padding: 20px;}
#lightboxes h3 {
font-weight: normal;
font-size: 1.8461em;
margin: 0 0 0.4583em 0;}
#lightboxes a.close {
position: absolute;
top: 20px;
right: 20px;
display: block;
width: 20px;
line-height: 20px;
text-align: center;
background-color: #ddd;
text-decoration: none;
font-weight: bold;
color: #999;
font-size: 1.2em;}
#lightboxes a.close:hover {
background-color: #999;
color: #fff;}
Все относительно просто, но надо сделать несколько пояснений, почему определенные элементы имеют заданные свойства. Для лайтбокса основную роль играет следующий стиль:
#lightboxes li {
width: 100%;
height: 9999px;
position: relative;
background: rgba(0,0,0,.5);}
Элемент <li> в нашем уроке действует как покрывающий слой, который виден непосредственно под прямоугольником лайтбокса. Мы задаем ему высоту в 9999px исходя из предположений, что никто не будет иметь разрешение экрана больше такой величины. Мы не используем свойство height: 100% потому, что это вызывает ошибку при изменении размеров окна. Попробуйте использовать процентное выражение для свойства и изменить высоту окна. Если вы найдете другое решение указанное проблеме - напишите в комментариях к уроку!
Обратите внимание, что мы используем RGBa для цвета фона. Internet Explorer, как всегда, не поддерживает RGBa. Поэтому нужно добавить специфическую разметку и стиль для IE, чтобы обойти засаду. Поместите следующий код CSS в секцию <head> вашего документа:
<!--[if IE]>
<style type="text/css">
#lightboxes .ie-bg {
background: #000;
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
filter: alpha(opacity=75);}
</style>
<![endif]-->
Затем добавьте следующую разметку внизу определения ваших лайтбоксов (перед закрывающим тегом</li> каждого лайтбокса):
<!--[if IE]>
<div class="ie-bg"></div>
<![endif]-->
Кто-нибудь из читателей наверняка обратит внимание, что таким образом вызывается ActiveX попап в IE, но тем не менее без использования JavaScript.
Шаг 3. Позиционирование лайтбокса
Если посмотреть на промежуточный результат, то лайтбокс располагается под нашим контентом , что не соответствует представлениям о данном элементе веб интерфейса. Таким нам нужно добавить свойств CSS, чтобы лайтбокс располагался поверх контента. Следующий код надо добавить к стилю #container:
position: absolute;
top: 0;
left: 0;
Данный код может несколько смущать. Почему мы добавляем его к #container, а не к стилю элемента #lightboxes? Потому что, если добавить его к стилю элемента #lightboxes, то данный элемент-потомок будет всегда над #container (вне зависимости от ничего), таким образом мы никогда не сможем нажать на ссылку в области контента снова, даже когда лайтбокс будет ‘закрыт’. А мы располагаем #container между элементами наследниками #lightboxes. Почему это необходимо станет понятно на следующем шаге.
Также нам нужно видеть одновременно только один лайтбокс, поэтому добавим к стилю #lightboxes:
overflow: hidden;
Это работает, потому что для элемента #lightboxes в CSS задана высота в 100% от размера окна. Таким образом он скрывает все, что выступает за высоту окна. Однако Internet Explorer требует дополнительных действий, чтобы получить такой же эффект. Нужно добавить следующий код в раздел CSS для IE в условном комментарии, который был вставлен ранее:
#lightboxes {
position: relative;}
Шаг 4. Открытие и закрытие лайтбокса
Итак, у нас настроен вид элементов и позиционирование всего на странице, но как мы будем открывать и закрывать лайтбокс? Просто.
Наверняка вы очень хорошо знаете как ссылаться на элементы на той же странице с помощью атрибута ID. Однако вы можете не знать, что ссылка на элемент, который скрыт на странице, вызывает "вытягивание" элемента в область просмотра, а содержимое окна опускается под него.
Таким образом, мы изменяем значение href в наших ссылках на значения ID лайтбоксов и создаем новый элемент #close, который является ссылкой на кнопку для закрытия. Теперь разметка должна выглядеть следующим образом:
<div id="container">
<div id="header">
<h1>Лайтбокс на XHTML & CSS (без использования JavaScript)</h1>
<p>
<strong>
Разработчик: <a href="http://twitter.com/jjenzz" target="_blank">Jenna Smith</a> /
Исправления для OPERA: <a href="http://www.3d4x.ch/" target="_blank">Tobias Wiersch</a> /
Перевод на русский язык: команда <a href="http://www.ruseller.com/" target="_blank">сайта RUSELLER.COM</a>
</strong>
</p>
</div>
<div id="content">
<h2>Нажмите на ссылки в тексте ниже, чтобы увидеть лайтбокс в действии</h2>
<p>Lorem ipsum dolor sit amet, <a href="#lightbox-about">consectetur</a> adipiscing elit.
Donec massa lorem, elementum et mollis non, viverra a est. Proin nunc orci, tristique at egestas et,
interdum ac ipsum. Nulla ullamcorper vulputate erat ac gravida. Mauris facilisis, leo ac condimentum commodo,
justo eros molestie dolor, a posuere orci tortor sed lacus. Suspendisse dictum, magna eu posuere tempor,
augue diam tempor lacus, sed hendrerit nulla ante quis justo. Aliquam eget tellus risus.</p>
<p>Proin <a href="#lightbox-more">sollicitudin</a>
elementum sem id pulvinar. Nunc vitae nulla nunc, at tempor nisi. Vivamus condimentum tempus auctor. Vivamus
aliquet lorem at mauris rutrum vitae molestie nunc hendrerit. Pellentesque condimentum metus sed mi euismod
lobortis id sit amet orci. Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
Praesent bibendum sagittis elit, nec convallis enim tincidunt quis. Duis vitae risus sed ipsum varius volutpat
in in tortor. Duis nec est at mi condimentum consequat sed vitae metus. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.</p>
</div>
<div id="footer">
<p>Copyright <a href="http://twitter.com/jjenzz" target="_blank">Jenna Smith</a></p>
<p>Перевод на русский язык: команда <a href="http://www.ruseller.com/" target="_blank">сайта RUSELLER.COM</a></p>
</div>
</div>
<ul id="lightboxes">
<li id="close"></li>
<li id="lightbox-about">
<div class="box">
<a href="#close" class="close" title="Закрыть окно">x</a>
<h3>Заголовок подтемы</h3>
<p>
Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.
</p>
<p>
Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.
</p>
</div>
<!--[if IE]>
<div class="ie-bg"></div>
<![endif]-->
</li>
<li id="lightbox-more">
<div class="box">
<a href="#close" class="close" title="Закрыть окно">x</a>
<h3>Заголовок текста в лайтбоксе</h3>
<p>
Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.
</p>
</div>
<!--[if IE]>
<div class="ie-bg"></div>
<![endif]-->
</li>
</ul>
Вы не сможете протестировать страницу в данный момент, потому что пустой элемент #close располгается выше #container, не дает нажимать ни на какие другие элементы. Однако, если вы добавите ‘#lightbox-about’ в адресную строку браузера, то появится наш лайтбокс, а изменение на ‘#close - уберет лайтбокс с экрана.
Теперь нам надо удалить фоновый цвет с элемента #close, чтобы он выглядел так, как будто здесь ничего нет, и позиционировать его позади элемента #container, чтобы мы могли нажимать на ссылки в #container.
Помните, что элемент #container позиционируется между элементами лайтбокса? Вот в чем заключается причина.
Следующий кусок CSS нужно добавить к стилю элемента #close:
#lightboxes #close {
background-color: transparent;
z-index: -1;}
Теперь можно открывать и закрывать лайтбокс!
Как это работает? Если вы не установите z-index для элемента, то он будет располагаться в зависимости от своего положения в коде. Следовательно элементы лайтбокса <li> автоматически появляются выше контейнера, так как они располагаются дальше в разметке. Однако, задавая одному из них отрицательное значения z-index, мы размещаем его позади любого элемента, который ему предшествует в разметке.
Шаг 5. Добавляем контент в контейнер
В данный момент в нашем контейнере не так много контента, таким образом он весь выводится на одну страницу и все прекрасно работает. Однако, если вы добавите несколько страниц контента, то обнаружите, что мы еще не все сделали. Появляется полоска прокрутки, которая позволяет прокручивать контент за границу лайтбокса и его перекрывающего слоя. Так происходит потому, что документ может прокручиваться, но лайтбокс имеет только 100% высоты окна, а не документа. Элемент #container также имеет 100% высоты окна, поэтому простым решением является переполнение контейнера, так что он будет прокручиваться вместо документа. Добавляем к стилю элемента #container:
overflow: auto;
Если теперь посмотреть на наш документ в Internet Explorer, то будет видно две полосы прокрутки. Одна для #container и недоступная полоса прокрутки для документа. Это легко поправить, добавив следующий код CSS в раздел для IE:
html {
overflow-y: auto;}
Вот и все.
Весь документ будет выглядет следующим образом:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Лайтбокс на XHML и CSS</title>
<style type="text/css">
html {
font-size: 75%;}
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;}
body {
background-color: #f8f8f8;
font-family: arial, helvetica, sans-serif;
color: #777;
text-align: center;
font-size: 1.0833em;
line-height: 1.6923em;}
a {
color: #09F;}
h2 {
font-weight: normal;}
p {
margin: 0 0 1.6923em 0;}
#container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: auto;}
#header,
#content,
#footer {
text-align: left;
width: 870px;
margin: 0 auto;
padding: 40px;}
#header,
#footer {
background-color: #eee;}
#header h1 {
margin: 0;}
#header p {
margin: 5px 0 0;}
#content {
background-color: #fff;}
/* ---------------------------------------------------------- */
/* Лайтбоксы
/* ---------------------------------------------------------- */
#lightboxes {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
overflow: hidden;}
#lightboxes li {
width: 100%;
height: 9999px;
position: relative;
background: rgba(0,0,0,.5);}
#lightboxes .box {
position: absolute;
width: 400px;
height: 400px;
left: 50%;
top: 50px;
border: 10px solid #999;
margin-left: -230px;
background-color: #fff;
padding: 20px;}
#lightboxes h3 {
font-weight: normal;
font-size: 1.8461em;
margin: 0 0 0.4583em 0;}
#lightboxes a.close {
position: absolute;
top: 20px;
right: 20px;
display: block;
width: 20px;
line-height: 20px;
text-align: center;
background-color: #ddd;
text-decoration: none;
font-weight: bold;
color: #999;
font-size: 1.2em;}
#lightboxes a.close:hover {
background-color: #999;
color: #fff;}
#lightboxes #close {
background-color: transparent;
z-index: -1;}
</style>
<!--[if IE]>
<style type="text/css">
html {
overflow-y: auto;}
#lightboxes {
position: relative;}
#lightboxes .ie-bg {
background: #000;
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
filter: alpha(opacity=75);}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
<h1>Лайтбокс на XHTML & CSS (без использования JavaScript)</h1>
<p>
<strong>
Разработчик: <a href="http://twitter.com/jjenzz" target="_blank">Jenna Smith</a> /
Исправления для OPERA: <a href="http://www.3d4x.ch/" target="_blank">Tobias Wiersch</a> /
Перевод на русский язык: команда <a href="http://www.ruseller.com/" target="_blank">сайта RUSELLER.COM</a>
</strong>
</p>
</div>
<div id="content">
<h2>Нажмите на любой ссылке, чтобы увидеть лайтбокс в действии</h2>
<p>Lorem ipsum dolor sit amet, consectetur <a href="#lightbox-about">consectetur</a> adipiscing elit.
Donec massa lorem, elementum et mollis non, viverra a est. Proin nunc orci, tristique at egestas et,
interdum ac ipsum. Nulla <a href="#lightbox-more">more info</a> vulputate erat ac gravida. Mauris facilisis, leo ac condimentum commodo,
justo eros molestie dolor, a posuere orci tortor sed lacus. Suspendisse dictum, magna eu posuere tempor,
augue diam tempor lacus, sed hendrerit nulla ante quis justo. Aliquam eget tellus risus.</p>
<p>Proin sollicitudin <a href="#lightbox-more">sollicitudin</a>
elementum sem id pulvinar. Nunc vitae nulla nunc, at tempor nisi. Vivamus condimentum tempus auctor. Vivamus
aliquet lorem at mauris rutrum vitae molestie nunc hendrerit. Pellentesque condimentum metus sed mi euismod
lobortis id sit amet orci. Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
Praesent bibendum sagittis elit, nec convallis enim tincidunt quis. Duis vitae risus sed ipsum varius volutpat
in in tortor. Duis nec est at mi condimentum consequat sed vitae metus. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur <a href="#lightbox-about">consectetur</a> elit. Donec massa lorem,
elementum et mollis non, viverra a est. Proin nunc orci, tristique at egestas et, interdum ac ipsum. Nulla
ullamcorper vulputate erat ac gravida. Mauris facilisis, leo ac condimentum commodo, justo eros molestie dolor,
a posuere orci tortor sed lacus. Suspendisse dictum, magna eu posuere tempor, augue diam tempor lacus, sed
hendrerit nulla ante quis justo. Aliquam eget tellus risus. Proin sollicitudin elementum sem id pulvinar. Nunc
vitae nulla nunc, at tempor nisi. Vivamus condimentum tempus auctor. Vivamus aliquet lorem at mauris rutrum vitae
molestie nunc hendrerit. Pellentesque condimentum metus sed mi euismod lobortis id sit amet orci. Duis eros
nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non risus dignissim placerat et eu dolor.
Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt. Praesent bibendum sagittis elit, nec
convallis enim tincidunt quis. Duis vitae risus sed ipsum varius volutpat in in tortor. Duis nec est at mi
condimentum consequat sed vitae metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="footer">
<p>Copyright <a href="http://twitter.com/jjenzz" target="_blank">Jenna Smith</a></p>
<p>Перевод на русский язык: команда <a href="http://www.ruseller.com/" target="_blank">сайта RUSELLER.COM</a></p>
</div>
</div>
<ul id="lightboxes">
<li id="close"></li>
<li id="lightbox-about">
<div class="box">
<h3>Заголовок подтемы</h3>
<p>
Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.
</p>
<p>
Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.
</p>
<a href="#close" class="close" title="Закрыть окно">x</a>
</div>
<!--[if IE]>
<div class="ie-bg"></div>
<![endif]-->
</li>
<li id="lightbox-more">
<div class="box">
<h3>Еще один заголовок</h3>
<p>
Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non
risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt.
Praesent bibendum sagittis elit, nec convallis enim tincidunt quis.
</p>
<a href="#close" class="close" title="Закрыть окно">x</a>
</div>
<!--[if IE]>
<div class="ie-bg"></div>
<![endif]-->
</li>
</ul>
</body>
</html>
Заключение
Все проделанное служит только для пробы сил и маловероятно, что кто-то будет использовать его в реальных проектах. Но никто не может знать, на какие мысли и идеи может натолкнуть подобный опыт!