Простой выпадающий блок, оверлэй с jQuery

→   Выпадающий блок, оверлэй с jQuery

Оверлэй

Пример всё произойдет
на этой странице

Выпадающий блок

Простой выпадающий блок, после клика по заданному элементу, оверлэй с jQuery.

 

В общем-то, уже есть большое количество плагинов в которых реализован удобный оверлэй, например:

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

Но о них и потом можно поговорить

 

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

 

Итак, во-первых, представим будущую структуру:

допустим уже есть какая-то конструкция (вёрстка) в котороой предусмотрен кликабельный элемент, после клика по которому будет появляться скрытый блок. Напишем html-разметку этого блока:

 

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>

CSS

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

1) В первую очередь опишем фоновый блок:

  1. .overlay{
  2.     background:transparent url(images/overlay.png) repeat top left;
  3.     position:fixed; /* фиксим и далее растягиваем на весь экран*/
    1.     top:0px;
    2.     bottom:0px;
    3.     left:0px;
    4.     right:0px;
    5.     z-index:100;   /* поднимем его выше основной разметки*/
    6. }

2) Правила для выпадающего блока:

  1. .nonebox{
  2.      position:fixed;
  3.      top:-300px;
  4.      left:35%;
  5.      right:35%;
  6.      background:#fff;
  7.      color:#4d4d4d;
  8.      padding:20px;
  9.      border:5px solid #e4e4e4;
  10.      padding:25px;
  11.      z-index:101;   /* а его выше фонового блока*/
  12. }

3) И еще есть элемент после клика по которому наш блок будет закрываться:

  1. a.box-close{
  2.      float:right;
  3.      width:26px;
  4.      height:26px;
  5.      background:url('images/close.png') repeat top left;;
  6.      margin:-30px -30px 0px 0px;
  7.      cursor:pointer;
  8.     
  9. }

 

Javiscript (jQuery)

Теперь самое интересное — джаваскрипт.

Как всегда:
а) Подключаем jQuery.js;
б) Пишем небольшой сниппет ↓

  1. $(function() {
  2.     $('#click-elem').click(function(){  // добираемся до элемента по которому будем кликать
  3.         $('#overlay').fadeIn('fast',function(){ // после клика запускаем наш оверлэй
  4.             $('#nonebox').animate({'top':'160px'},500); // а теперь аккуратно выводим наш блок
  5.         });
  6.     });
  7.     $('#box-close').click(function(){ // кликаем по элементу который всё это будет закрывать, также здесь можно добавить сам оверлэй, чтобы по клику вне блока, всё сворачивалось.
  8.         $('#nonebox').animate({'top':'-300px'},500,function(){ // убираем наш блок
  9.             $('#overlay').fadeOut('fast'); // и теперь убираем оверлэй
  10.         });
  11.     });
  13. });
Source Code Highlighter
Скачать rar
5,4 kb
Конечно эта контрукция не будет работать в ie6, потому что он не умеет растягивать блок на весь экран с помощью left/right, top/bottom 0px. Но можно обойти эти ограничения, а об этом позже :-)

Некоторые говорят, что в IE не работает. В скачиваемом примере не указан доктайп, для IE его, конечно же, надо указывать, например: <!DOCTYPE html>

jQuery