Для этого скрипта есть уже куча библиотек (Lightbox, Greybox, Fancybox...) и плагинов для jQuery (и уверен не только для него). Давайте забудем про все эти библиотеки и создадим свой lightbox.
1. Для начала создадим чёрный прозрачный фон. Для этого создаём div, заливаем фон чёрным, наполняем <br />-ами, позиционируем абсолютно на большом z-индексе с нулевыми top и left и наконец делаем прозрачным. Да, и забыл ещё: делаем высоту и длину 100% и придаём div-у идентификатор. Возьмём например bgBlack. Да, и ещё: если мы хотим, чтобы lightbox появлялся тока по нашему щелчку (например), то делаем его невидимым. Именно с помощью display: none, т.к. с помощью полной прозрачности или visibility: hidden он может мешать вам работать со страницей... Короче, модальный lightbox получится :).
Code
<div id="bgBlack" width="100" height="100%" style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1000; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; background-color: #000000; display: none;">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
2. Теперь очередь самого lightbox-а. Для начала создадим ещё один div. Как его позиционировать по центру, тут всё написано. Просто делаете top и left равными 50%, а потом делаете margin-top: -(height/2), margin-left: -(width/2). Не забудьте абсолютно позиционировать. Ещё делаем padding-top: 25px, белый фон и большой z-index. Обязательно больше того, что был у bgBlack. И сделайте ему идентификатор... Скажем, box. И не забудьте сделать его невидимым.
3. Создаём новый div внутри div-а, созданного в прошлом шаге. Позционируем его по центру (align="center").
4. Создаём изображение внутри div-а, созданного в прошлом шаге. Сделаем у изображения padding-bottom: 10px.
5. Создаём новый div внутри созданного в шаге 2. Позиционируем его по правой стороне (align="right"/text-align: right). Вставляем ему следующий стиль:
Code
cursor:hand; font-family: Verdana; font-size:16px; margin-right: 5px; font-weight: bold
6. Вставляем в div, созданный в прошлом шаге обработчик события onClick. Пусть он вызывает функцию LBHide('bgBlack', 'box'). Оба параметра указывают на идентификаторы lightbox-а. Функцию LBHide мы напишем чуть позже.
7. Вставляем в div, созданный в шаге 5 слово Закрыть.
8. Вот, как сейчас выглядит наш box:
Code
<div style="width: 700px; height: 700px; position: absolute; top: 50%; left: 50%; background-color:#ffffff; z-index: 2000; margin-left: -350px; margin-top: -350px; padding-top: 25px; display: none;" id="whiteG">
<div align="center">
<img src="http://basik.ru/images/winter_predators/14.jpg" width="650" height="650" style="width: 650px; height: 650px; padding-bottom: 10px"></img></div>
<div align="right" onClick="GreyHid()" style="cursor:hand; font-family: Verdana; font-size:16px; margin-right: 5px; font-weight: bold">
Закрыть
</div>
</div>
9. И наконец пишем две функции. Это LBHide (скрывает lightbox) и LBVis (появляет lightbox). Они выглядят вот так:
Code
function LBVis(black, box){
document.getElementById(black).style.display='block';
document.getElementById(box).style.display='block';
}
function LBHide(black, box){
document.getElementById(black).style.display='none';
document.getElementById(box).style.display='none';
}
Суббота, 15.05.2010, 19:21 |
