Перво-наперво распишем подробнее, что предстоит сделать.
На html странице должно располагаться несколько кнопок (скажем, три, но, если хочется, то может быть и больше). По нажатию на кнопки будут появляться всплывающие окна (popup) с различным содержанием. Для наглядности примера в первое окно поместим форму с регистрацией, во второе - картинки и в третьем окне, что бы продемонстрировать всю безграничность возможностей метода, расположим табы (вкладки с содержимым). При показе попапа страница должна перекрываться темным прозрачным фоном. В каждом всплывающем окне должна присутствовать интуитивно понятная любому пользователю пиктограмма, закрывающая окно.
По ссылкам ниже можно скачать готовый код примера, или перейти на демо страницу:
На первый взгляд задачка сложновата, но это только на первый взгляд. Разметим кнопки, вызывающие окна:
<div class="link_group"> <a class="show_popup" rel="reg_form" href="#">Зарегистрируйтесь</a> <a class="show_popup" rel="photo_win" href="#">Галерея</a> <a class="show_popup" rel="tabs_info" href="#">Окно со вкладками</a> </div>
Все кнопки оформим в виде ссылок, зададим им общий класс (у меня это show_popup) и положим внутрь div-а с каким нибудь произвольным классом (я назвал этот блок link_group). Для того, что бы по клику на определенную кнопку открывалось нужное окно, добавим каждой ссылке атрибут rel параметр которого будет в точности соответствовать названию класса попапа.
Осталось с помощью стилей зааккуратить кнопки и работу над ними можно считать законченной:
/**********popup links**********/
.link_group {
margin:20px auto;
width:555px;
text-align:center;
}
.link_group a {
margin:0 20px;
padding:5px 15px;
color:#000;
font-weight:bold;
display:inline-block;
vertical-align:top;
*display:inline;
*zoom:1;
position:relative;
text-decoration:none;
text-transform:uppercase;
border:1px solid #ccc;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
behavior: url(PIE.htc);
}
.link_group a:hover {
color:#cc0000;
}
По большому счету, в стилях все понятно - центрируем блок со ссылками, закругляем углы, для ИЕ 7-8 подключаем PIE. В итоге кнопки выглядят одинаково во всех, распространенных на сегодняшний день, браузерах.
Займемся попапами. HTML разметка для всех окон будет одинакова. Различия касаются лишь размеров (ширины) и содержимого попапов.
Первым разметим попап с формой регистрации:
<div class="popup reg_form"> <a class="close" href="#">Close</a> <h2>Регистрация на сайте</h2> <form method="post" action=""> <label for="login">Введите логин:</label> <input type="text" name="login" /> <label for="password">Введите пароль:</label> <input type="password" name="password" /> <input type="submit" value="Войти" /> </form> </div>
Для самого первого обертывающего блока задаем двойной класс (popup reg_form) через пробел (обратите внимание, что имя reg_form соответствует атрибуту rel первой кнопки). Это позволит написать общие стили для всех окон и задать различные параметры для каждого окна отдельно.
Вторым разметим попап с картинками:
<div class="popup photo_win"> <a class="close" href="#">Close</a> <h2>Галерея</h2> <div class="img_wrap"> <img alt="" src="/images/pic_1.png" /> <img alt="" src="/images/pic_2.png" /> <img alt="" src="/images/pic_3.png" /> <img alt="" src="/images/pic_2.png" /> <img alt="" src="/images/pic_3.png" /> <img alt="" src="/images/pic_1.png" /> </div> </div>
Здесь так же задаем двойной класс (popup photo_win), путь к картинкам указывается к той папке, где эти картинки находятся.
И, наконец, разметим третий попап. Так же, как и в двух первых вариантах, обертывающему блоку задаем общий (popup) и индивидуальный (tabs_info) классы. Само содержание (разметку табов) возьмем из статьи "Универсальные вкладки на jQuery" и немного подправим под данную задачу.
<div class="popup tabs_info"> <a class="close" href="#">Close</a> <h2>Вкладки (tabs)</h2> <div class="selectTabs"> <ul class="lineTabs"> <li class="active"><a href="#">Удобства вкладок</a></li> <li><a href="#">Преимущества вкладок</a></li> </ul> <div class="tab_content"> <div class="tab1"> <p>Tabs - элемент интерфейса для отображения группы документов таким образом, что только 1 активный документ показан, а остальные спрятаны. Пришёл этот элемент интерфейса в компьютеры из офисного быта: папки с документами разделялись такими закладками на группы. Ну и конечно телефонные книги часто разделены табами по алфавиту.</p> </div> <div class="tab2"> <p><img alt="" src="/images/tabs.jpg" /> Табы показаны в одном месте, рядом. Отсюда — удобство навигации. И целостность навигации, что тоже важно. Все уже привыкли к табам, так как видят и используют их везде (те же телефонные книжки, каталоги в библиотеках, и т.д.). А значит и домохозяйка знает, как они работают.</p> </div> </div> </div> </div>
Теперь, что бы работа радовала глаз и окружающих, наведем красоту на странице. Сначала опишем общие для всех окон правила:
/**********All styles popup**********/
.popup {
padding:5px 15px 15px;
position:fixed;
top:100px;
left:50%;
display:none;
overflow:hidden;
border:1px solid #ccc;
background:#fff;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
z-index:100;
behavior: url(PIE.htc);
}
.popup h2 {
font:bold 18px/32px Arial, san-serif;
}
.popup a.close {
width:16px;
height:16px;
display:block;
text-indent:-9999px;
position:absolute;
top:10px;
right:10px;
background:url(../images/close.png) no-repeat;
}
Все попапы будут отцентрированы по горизонтали, оснащены кнопкой, закрывающей окно и их заголовки будут оформлены одинаково. При загрузке страницы все три окна будут скрыты (правило display:none; для дива с классом popup).
Подошла очередь оформить каждое отдельное окно.
/**********popup with form**********/
.reg_form {
margin-left:-200px;
width:400px;
}
.reg_form form {
margin-top:10px;
}
.reg_form label {
width:100px;
height:26px;
font:bold 12px/26px Arial, san-serif;
display:inline-block;
vertical-align:top;
*display:inline;
*zoom:1;
}
.reg_form input[type=text], .reg_form input[type=password] {
margin-bottom:10px;
padding:0 3px;
width:274px;
height:22px;
font:bold 12px/26px Arial, san-serif;
border:1px solid #ccc;
}
.reg_form input[type=submit] {
margin:10px 15px 0 0;
padding:3px 10px;
float:right;
background:#ccc;
border:0;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
font:bold 10px Arial, san-serif;
text-transform:uppercase;
position:relative;
cursor:pointer;
behavior: url(PIE.htc);
}
.reg_form input[type=submit]:hover {
color:#fff;
}
/**********popup with pictures**********/
.photo_win {
margin-left:-250px;
width:500px;
}
.img_wrap {
margin-top:10px;
width:100%;
overflow:hidden;
}
.img_wrap img {
margin:0 10px 10px;
height:187px;
}
/**********popup with tabs**********/ .tabs_info { margin-left:-250px; width:500px; } /*tabs links*/ .selectTabs { margin:10px 0 0; width:100%; } .lineTabs { width:100%; float:left; list-style:none; } .lineTabs li { margin:0 0 -1px 10px; float:left; position:relative; z-index:1; border:1px solid #ccc; } .lineTabs li.active { border-bottom:1px solid #fff; } .lineTabs li.active a { color:#cc0000; } .lineTabs a { padding:4px 15px; display:block; text-decoration:none; color:#000; font-weight:bold; font-size:10px; text-transform:uppercase; } /*tabs content*/ .tab_content { width:100%; float:left; border:1px solid #ccc; -moz-border-radius:0 0 5px 5px; -webkit-border-radius:0 0 5px 5px; border-radius:0 0 5px 5px; position:relative; behavior: url(PIE.htc); } .tab_content div{ display:none; } .tab_content .tab1 { display:block; } .tab_content .tab1, .tab_content .tab2 { padding:10px 5px; } .tab_content img { margin:0 10px 5px 0; float:left; }
И последнее, что нужно сделать, прежде, чем приступить к скрипту, прописать стиль для затемненного фона. Он будет показываться ниже всплывающих окон, перекрывая весь контент на странице.
/**********overlay styles**********/
#overlay {
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
display:none;
background:#000;
opacity:.8;
}
Марафет наведен, осталось придать всей красоте интерактивности и "дело в шляпе". Нам понадобится написать скрипт для вкладок, которые размещены в одном из всплывающих окон и скрипт для попапов. Заострять внимание на скрипте для табов не будем, он рассматривался все в той же статье - "Универсальные вкладки на jQuery". А вот на скрипт для попапов обсудим подробно.
Весь js будет следующим:
$(function () { //script for popups $('a.show_popup').click(function () { $('div.'+$(this).attr("rel")).fadeIn(500); $("body").append("<div id='overlay'></div>"); $('#overlay').show().css({'filter' : 'alpha(opacity=80)'}); return false; }); $('a.close').click(function () { $(this).parent().fadeOut(100); $('#overlay').remove('#overlay'); return false; }); //script for tabs $("div.selectTabs").each(function () { var tmp = $(this); $(tmp).find(".lineTabs li").each(function (i) { $(tmp).find(".lineTabs li:eq("+i+") a").click(function(){ var tab_id=i+1; $(tmp).find(".lineTabs li").removeClass("active"); $(this).parent().addClass("active"); $(tmp).find(".tab_content div").stop(false,false).hide(); $(tmp).find(".tab"+tab_id).stop(false,false).fadeIn(300); return false; }); }); }); });
Разберем подробнее, чего тут таково мы понаписали (напоминаю, рассматриваем только ту часть скрипта, которая отвечает за показ скрытых окон).
Перво-наперво, разыскиваем все ссылки с классом show_popup и отслеживаем когда по ним кликнет пользователь.
Если такое событие произошло, ищем блок, класс которого индентичен атрибуту rel ссылки, по которой кликнули ($('div.'+$(this).attr("rel"))) и с помощью метода анимации .fadeIn(500) показываем этот блок (установленный в скобках параметр указывает на то, что блок будет проявляться на странице в течении 500 миллисекунд).
Далее с помощью метода .append("<div id='overlay'></div>") в самый конец body помещаем пустой блок с id=overlay (оформление для этого блока задавалось в таблице стилей) и, поскольку он является скрытым, с помощью метода .show() делаем его видимым.
Последним действием в цепочке, вызванной событием click(), устраняем возможные проблемы с прозрачностью (.css({'filter' : 'alpha(opacity=80)'})) в горяче любимых ИЕ браузерах. Кстати, это правило можно было вынести и в таблицу стилей. Тут уже каждый решает, как ему удобнее, сам.
Проделав кучу вышеописанных операций, уходим в режим ожидания и находимся в этом состоянии до тех пор, пока пользователь не кликнет по крестику (ссылка с классом close). Как только это произошло, снова засучим рукава.
С помощью метода .parent() отыщем родителя для ссылки, по которой кликнули и спрячем найденный блок (метод .fadeOut(100)). Что бы исчезал блок не слишком резко, зададим временной интервал 100 миллисекунд (можно больше - как кому нравится).
Затем разыскиваем блок с id=overlay и при помощи метода .remove('#overlay') удаляем его со страницы, после чего снова ожидаем, когда пользователь кликнет по какой нибудь из кнопок.
Стоит сказать еще пару слов по поводу записи return false;. Она применяется для того, что бы запретить браузеру осуществлять переход по ссылкам, используемым в конструкции.
Вот, пожалуй и все. Успехов в использовании...