Уроки по css | Делаем лайтбокс без использования JavaScript

Главная->Уроки по css->Делаем лайтбокс без использования JavaScript

В данном уроке мы разберем процесс создания лайтбокса с использованием только XHTML и CSS. Полученный код будет работать в Firefox, Opera, Chrome, Safari, IE6, IE7 и IE8. Шаг 1. Пишем разметку. 01 <div id="container"> 02 <div id="header"> 03 <h1>Лайтбокс на XHTML & CSS (без использования JavaScript)</h1> 04 <p> 05 <strong> 06 Разработчик: <a href="http://twitter.com/jjenzz" target="_blank">Jenna Smith</a> / 07 Исправления для OPERA: <a href="http://www.3d4x.ch/" target="_blank">Tobias Wiersch</a> / 08 Перевод на русский язык: команда <a href="http://www.ruseller.com/" target="_blank">сайта RUSELLER.COM</a> 09 </strong> 10 </p> 11 </div> 12 <div id="content"> 13 <h2>Нажмите на ссылки в тексте ниже, чтобы увидеть лайтбокс в действии</h2> 14 <p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. 15 Donec massa lorem, elementum et mollis non, viverra a est.Aliquam eget tellus risus.</p> 16 <p>Proin <a href="#">sollicitudin</a>elementum sem id pulvinar. 17 Duis nec est at mi condimentum consequat sed vitae metus. Lorem ipsum dolor sit amet, consectetur 18 adipiscing elit.</p> 19 </div> 20 <div id="footer"> 21 <p>Copyright <a href="http://twitter.com/jjenzz" target="_blank">Jenna Smith</a></p> 22 <p>Перевод на русский язык: команда <a href="http://www.ruseller.com/" target="_blank">сайта RUSELLER.COM</a></p> 23 </div> 24 </div> Разметка очень простая. На данном этапе у нас есть две ссылки, которые ведут в никуда. Данные ссылки в конечном итоге будут использоваться для включения лайтбоксов, но сначала нам нужно добавить разметку для этих лайтбоксов после контейнера <div>: 01 <ul id="lightboxes"> 02 <li id="lightbox-about"> 03 <div class="box"> 04 <h3>Заголовок подтемы</h3> 05 <p> 06 Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non 07 risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt. 08 Praesent bibendum sagittis elit, nec convallis enim tincidunt quis. 09 </p> 10 </div> 11 </li> 12
<li id="lightbox-more"> 13 <div class="box"> 14
<h3>Заголовок текста в лайтбоксе</h3> 15 <p> 16 Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non 17
risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt. 18 Praesent bibendum sagittis elit, nec convallis enim tincidunt quis. 19 </p> 20 </div> 21 </li> 22 </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; 014
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, 040 #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> вашего документа: 01



Затем добавьте следующую разметку внизу определения ваших лайтбоксов (перед закрывающим тегом</li> каждого лайтбокса): 1  Кто-нибудь из читателей наверняка обратит внимание, что таким образом вызывается ActiveX попап в IE, но тем не менее без использования JavaScript. Шаг 3. Позиционирование лайтбокса Если посмотреть на промежуточный результат, то лайтбокс располагается под нашим контентом , что не соответствует представлениям о данном элементе веб интерфейса. Таким нам нужно добавить свойств CSS, чтобы лайтбокс располагался поверх контента. Следующий код надо добавить к стилю #container: 1 position: absolute; 2 top: 0; 3 left: 0; Данный код может несколько смущать. Почему мы добавляем его к #container, а не к стилю элемента #lightboxes? Потому что, если добавить его к стилю элемента #lightboxes, то данный элемент-потомок будет всегда над #container (вне зависимости от ничего), таким образом мы никогда не сможем нажать на ссылку в области контента снова, даже когда лайтбокс будет ‘закрыт’. А мы располагаем #container между элементами наследниками #lightboxes. Почему это необходимо станет понятно на следующем шаге. Также нам нужно видеть одновременно только один лайтбокс, поэтому добавим к стилю #lightboxes: 1 overflow: hidden; Это работает, потому что для элемента #lightboxes в CSS задана высота в 100% от размера окна. Таким образом он скрывает все, что выступает за высоту окна. Однако Internet Explorer требует дополнительных действий, чтобы получить такой же эффект. Нужно добавить следующий код в раздел CSS для IE в условном комментарии, который был вставлен ранее: 1 #lightboxes { 2 position: relative;} Шаг 4. Открытие и закрытие лайтбокса Итак, у нас настроен вид элементов и позиционирование всего на странице, но как мы будем открывать и закрывать лайтбокс? Просто. Наверняка вы очень хорошо знаете как ссылаться на элементы на той же странице с помощью атрибута ID. Однако вы можете не знать, что ссылка на элемент, который скрыт на странице, вызывает "вытягивание" элемента в область просмотра, а содержимое окна опускается под него. Таким образом, мы изменяем значение href в наших ссылках на значения ID лайтбоксов и создаем новый элемент #close, который является ссылкой на кнопку для закрытия. Теперь разметка должна выглядеть следующим образом: 01 <div id="container"> 02 <div id="header"> 03 <h1>Лайтбокс на XHTML & CSS (без использования JavaScript)</h1> 04
<p> 05 <strong> 06 Разработчик: <a href="http://twitter.com/jjenzz" target="_blank">Jenna Smith</a> / 07 Исправления для OPERA: <a href="http://www.3d4x.ch/" target="_blank">Tobias Wiersch</a> / 08 Перевод на русский язык: команда <a href="http://www.ruseller.com/" target="_blank">сайта RUSELLER.COM</a> 09 </strong> 10 </p> 11 </div> 12 <div id="content"> 13 <h2>Нажмите на ссылки в тексте ниже, чтобы увидеть лайтбокс в действии</h2> 14 <p>Lorem ipsum dolor sit amet, <a href="#lightbox-about">consectetur</a> adipiscing elit. 15 Donec massa lorem, elementum et mollis non, viverra a est. Proin nunc orci, tristique at egestas et, 16 interdum ac ipsum. Nulla ullamcorper vulputate erat ac gravida. Mauris facilisis, leo ac condimentum commodo, 17 justo eros molestie dolor, a posuere orci tortor sed lacus. Suspendisse dictum, magna eu posuere tempor, 18 augue diam tempor lacus, sed hendrerit nulla ante quis justo. Aliquam eget tellus risus.</p> 19 <p>Proin <a href="#lightbox-more">sollicitudin</a> 20 elementum sem id pulvinar. Nunc vitae nulla nunc, at tempor nisi. Vivamus condimentum tempus auctor. Vivamus 21 aliquet lorem at mauris rutrum vitae molestie nunc hendrerit. Pellentesque condimentum metus sed mi euismod 22 lobortis id sit amet orci. Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non 23 risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt. 24 Praesent bibendum sagittis elit, nec convallis enim tincidunt quis. Duis vitae risus sed ipsum varius volutpat 25 in in tortor. Duis nec est at mi condimentum consequat sed vitae metus. Lorem ipsum dolor sit amet, consectetur 26 adipiscing elit.</p> 27 </div> 28 <div id="footer"> 29 <p>Copyright <a href="http://twitter.com/jjenzz" target="_blank">Jenna Smith</a></p> 30 <p>Перевод на русский язык: команда <a href="http://www.ruseller.com/" target="_blank">сайта RUSELLER.COM</a></p> 31 </div> 32 </div> 33 <ul id="lightboxes"> 34 <li id="close"></li> 35 <li id="lightbox-about"> 36 <div class="box"> 37 <a href="#close" class="close" title="Закрыть окно">x</a> 38 <h3>Заголовок подтемы</h3> 39 <p> 40 Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non 41 risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt. 42 Praesent bibendum sagittis elit, nec convallis enim tincidunt quis. 43 </p> 44 <p> 45 Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non 46 risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt. 47 Praesent bibendum sagittis elit, nec convallis enim tincidunt quis. 48 </p> 49 </div> 50  53 </li> 54 <li id="lightbox-more"> 55 <div class="box"> 56 <a href="#close" class="close" title="Закрыть окно">x</a> 57 <h3>Заголовок текста в лайтбоксе</h3> 58 <p> 59 Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non 60 risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt. 61 Praesent bibendum sagittis elit, nec convallis enim tincidunt quis. 62 </p> 63 </div> 64  67 </li> 68 </ul> Вы не сможете протестировать страницу в данный момент, потому что пустой элемент #close располгается выше #container, не дает нажимать ни на какие другие элементы. Однако, если вы добавите ‘#lightbox-about’ в адресную строку браузера, то появится наш лайтбокс, а изменение на ‘#close - уберет лайтбокс с экрана. Теперь нам надо удалить фоновый цвет с элемента #close, чтобы он выглядел так, как будто здесь ничего нет, и позиционировать его позади элемента #container, чтобы мы могли нажимать на ссылки в #container. Помните, что элемент #container позиционируется между элементами лайтбокса? Вот в чем заключается причина. Следующий кусок CSS нужно добавить к стилю элемента #close: 1 #lightboxes #close { 2 background-color: transparent; 3 z-index: -1;} Теперь можно открывать и закрывать лайтбокс! Как это работает? Если вы не установите z-index для элемента, то он будет располагаться в зависимости от своего положения в коде. Следовательно элементы лайтбокса <li> автоматически появляются выше контейнера, так как они располагаются дальше в разметке. Однако, задавая одному из них отрицательное значения z-index, мы размещаем его позади любого элемента, который ему предшествует в разметке. Шаг 5. Добавляем контент в контейнер В данный момент в нашем контейнере не так много контента, таким образом он весь выводится на одну страницу и все прекрасно работает. Однако, если вы добавите несколько страниц контента, то обнаружите, что мы еще не все сделали. Появляется полоска прокрутки, которая позволяет прокручивать контент за границу лайтбокса и его перекрывающего слоя. Так происходит потому, что документ может прокручиваться, но лайтбокс имеет только 100% высоты окна, а не документа. Элемент #container также имеет 100% высоты окна, поэтому простым решением является переполнение контейнера, так что он будет прокручиваться вместо документа. Добавляем к стилю элемента #container: 1 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"> 002
<html xmlns="http://www.w3.org/1999/xhtml"> 003
<head> 004
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 005
<title>Лайтбокс на XHML и CSS</title> 006
<style type="text/css"> 007
html { 008
font-size: 75%;
} 009 010
html, body { 011
height: 100%; 012
width: 100%; 013
margin: 0; 014
padding: 0;
} 015 016
body { 017
background-color: #f8f8f8; 018
font-family: arial, helvetica, sans-serif; 019
color: #777; 020
text-align: center; 021
font-size: 1.0833em; 022
line-height: 1.6923em;
} 023 024
a { 025
color: #09F;
} 026 027
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;
}
/* ---------------------------------------------------------- */ 063
/* Лайтбоксы
/* ---------------------------------------------------------- */ 065
#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; 098
top: 20px; 099
right: 20px; 100
display: block; 101
width: 20px; 102
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> 118

</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> / 143

Исправления для OPERA: <a href="http://www.3d4x.ch/" target="_blank">Tobias Wiersch</a> / 144 Перевод на русский язык: команда <a href="http://www.ruseller.com/" target="_blank">сайта RUSELLER.COM</a> 145 </strong> 146 </p> 147 </div> 148 <div id="content"> 149 <h2>Нажмите на любой ссылке, чтобы увидеть лайтбокс в действии</h2> 150 <p>Lorem ipsum dolor sit amet, consectetur <a href="#lightbox-about">consectetur</a> adipiscing elit. 151 Donec massa lorem, elementum et mollis non, viverra a est. Proin nunc orci, tristique at egestas et, 152 interdum ac ipsum. Nulla <a href="#lightbox-more">more info</a> vulputate erat ac gravida. Mauris facilisis, leo ac condimentum commodo, 153 justo eros molestie dolor, a posuere orci tortor sed lacus. Suspendisse dictum, magna eu posuere tempor, 154 augue diam tempor lacus, sed hendrerit nulla ante quis justo. Aliquam eget tellus risus.</p> 155 <p>Proin sollicitudin <a href="#lightbox-more">sollicitudin</a> 156 elementum sem id pulvinar. Nunc vitae nulla nunc, at tempor nisi. Vivamus condimentum tempus auctor. Vivamus 157 aliquet lorem at mauris rutrum vitae molestie nunc hendrerit. Pellentesque condimentum metus sed mi euismod 158 lobortis id sit amet orci. Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non 159 risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt. 160 Praesent bibendum sagittis elit, nec convallis enim tincidunt quis. Duis vitae risus sed ipsum varius volutpat 161 in in tortor. Duis nec est at mi condimentum consequat sed vitae metus. Lorem ipsum dolor sit amet, consectetur 162 adipiscing elit.</p> 163 <p>Lorem ipsum dolor sit amet, consectetur <a href="#lightbox-about">consectetur</a> elit. Donec massa lorem, 164 elementum et mollis non, viverra a est. Proin nunc orci, tristique at egestas et, interdum ac ipsum. Nulla 165 ullamcorper vulputate erat ac gravida. Mauris facilisis, leo ac condimentum commodo, justo eros molestie dolor, 166 a posuere orci tortor sed lacus. Suspendisse dictum, magna eu posuere tempor, augue diam tempor lacus, sed 167 hendrerit nulla ante quis justo. Aliquam eget tellus risus. Proin sollicitudin elementum sem id pulvinar. Nunc 168 vitae nulla nunc, at tempor nisi. Vivamus condimentum tempus auctor. Vivamus aliquet lorem at mauris rutrum vitae 169 molestie nunc hendrerit. Pellentesque condimentum metus sed mi euismod lobortis id sit amet orci. Duis eros 170 nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non risus dignissim placerat et eu dolor. 171 Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt. Praesent bibendum sagittis elit, nec 172 convallis enim tincidunt quis. Duis vitae risus sed ipsum varius volutpat in in tortor. Duis nec est at mi 173 condimentum consequat sed vitae metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 174 </div> 175 <div id="footer"> 176 <p>Copyright <a href="http://twitter.com/jjenzz" target="_blank">Jenna Smith</a></p> 177 <p>Перевод на русский язык: команда <a href="http://www.ruseller.com/" target="_blank">сайта RUSELLER.COM</a></p> 178 </div> 179 </div> 180 <ul id="lightboxes"> 181 <li id="close"></li> 182 <li id="lightbox-about"> 183 <div class="box"> 184 <h3>Заголовок подтемы</h3> 185 <p> 186 Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non 187 risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt. 188 Praesent bibendum sagittis elit, nec convallis enim tincidunt quis. 189 </p> 190 <p> 191 Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non 192 risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt. 193 Praesent bibendum sagittis elit, nec convallis enim tincidunt quis. 194 </p> 195 <a href="#close" class="close" title="Закрыть окно">x</a> 196 </div> 197  200 </li> 201 <li id="lightbox-more"> 202 <div class="box"> 203 <h3>Еще один заголовок</h3> 204 <p> 205 Duis eros nibh, tempor sed ultricies eget, malesuada id nunc. Praesent a purus non 206 risus dignissim placerat et eu dolor. Maecenas rutrum odio vitae libero sagittis a faucibus metus tincidunt. 207 Praesent bibendum sagittis elit, nec convallis enim tincidunt quis. 208 </p> 209 <a href="#close" class="close" title="Закрыть окно">x</a> 210 </div> 211  214 </li> 215 </ul> 216 </body> 217 </html> Заключение Все проделанное служит только для пробы сил и маловероятно, что кто-то будет использовать его в реальных проектах. Но никто не может знать, на какие мысли и идеи может натолкнуть подобный опыт!