Простий блок, що випадає, оверлей з jQuery

Випадаючий блок

Простий блок, що випадає, після кліка по заданому елементу, оверлей з jQuery.

Загалом уже є велика кількість плагінів в яких реалізований зручний оверлей, наприклад:

«галерейний» плагін FancyBox
FaceBox - "фейсбуківський" лайтбокс
jQuery Tools Overlay
чисто-джаваскриптове потужне рішення Highslide.js
Ну і практично у всіх галереях jQuery

Але про них і потім можна поговорити

А зараз спробуємо самі написати простий сніпет, що реалізує випадаючий блок з оверлеєм.

Отже, по-перше, представимо майбутню структуру:

Припустимо вже є якась конструкція (верстка) в якій передбачений клікабельний елемент, після кліка по якому буде з'являтися прихований блок. Напишемо html-розмітку цього блоку:

div class ="overlay" id ="overlay" style ="display:none;" > div > div class = "nonebox" id = "nonebox"> a class ="box-close" id ="box-close"> a > h1 > Заголовок h1 > p > Якийсь контент. Звичайний текст і т.д. p > div >

Тепер запишемо правила для розмітки:

1) Насамперед опишемо фоновий блок:

.overlay
background: transparent url(images/overlay.png) repeat top left;
position :fixed; /* фіксуємо і далі розтягуємо на весь екран*/

top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 100; /* піднімемо його вище за основну розмітку*/
>

2) Правила для випадаючого блоку:

.nonebox
position: fixed;
top: -300px;
left: 35%;
right: 35%;
background: #fff;
color: #4d4d4d;
padding: 20px;
border: 5px sol & padding: 25px;
z-index: 101; /* а його вище за фоновий блок*/
>

3) І ще є елемент після кліку по якому наш блок закриватиметься:

a.box-close
float: right;
width: 26px;
height: 26px;
background: url('images/close.png') repeat top left;;
margin: -30px -30px 0px 0px;
cursor: pointer;
>

Javiscript (jQuery)

Тепер найцікавіше – джаваскрипт.

Як завжди: а) Підключаємо jQuery.js; б) Пишемо невеликий сніпет ↓

Дехто каже, що в IE не працює. У прикладі, що скачується, не вказаний доктайп, для IE його, звичайно ж, треба вказувати, наприклад: