megafon4u.ru

Недавно столкнулся с такой задачей. Необходимо было при вызове поп-апа затемнить остальной фон сайта. При этом затемнение должно было быть прозрачным. Эта проблема решается довольно просто. К нам на выручку, опять же, придет библиотека jQuery. С начала расскажу теоретически всю физику процесса, а потом покажу код и объясню как он работает.
С начала к странице подключаем библиотеку jQuery. Затем через скрипты добавляем в тело документа (в тег BODY) один блочный элемент, допустим DIV. Для него, через CSS, должны быть прописаны правила, обеспечивающие фон этого элемента определенного цвета, допустим черного, слой должен находиться выше всех остальных слоев страницы и он должен занимать все доступное пространство в окне браузера. После этого настраивается прозрачность данного элемента до определенной величины, кому как нравится. Настроив фон, можно вывести попап. Здесь самое главное чтоб попап оказался выше затемненого DIVа. Теперь как это выглядит в коде.
JAVASCRIPT:

$(function(){
  $('button').bind('click', function(event){ 
  black_fon=document.createElement('div');
  black_fon.className='black_fon';
  $('body').append(black_fon);
  $('.black_fon').fadeTo(0, 0.4);
  $('.popup').fadeIn('slow');
  });
});

Здесь 'button' – кнопка на веб-странице, к которой присоединяется обработчик 'click'. При щелчке на ней оператор append добавляет в конец тега BODY елемент DIV с классом black_fon. В следующей строчке настраивается прозрачность этого DIVа. Оператор fadeTo говорит что прозрачности нужно присвоить значение 0.4 (или 40%) и сделать это за 0 милисекунд, тоесть мгновенно. Дальше организуем постепенное появление попапа.
Код CSS:

.body{ height:100%; padding:0; margin:0;}
.black_fon {
  background:#333;
  display:block;
  position: fixed;
  width:100%;
  height:100%;
  left: 0px;
  top: 0px;
  z-index:10;
}
.popup {
  position: absolute;
  z-index:20;
  display:none;
  background:#fff;
  width:200px;
  height:200px;
  left:50%;
  margin-left:-100px;
  top:50%;
  margin-top:-100px;
}

Для эмуляции свойства position: fixed, через conditional comments в отдельный файл для internet explorer 6.0 пропишем:

*html .black_fon{
  top: expression($('.black_fon').scrollTop + "px");
  position:absolute;
}

Тестовая страница.
Вот так, очень примитивно, можно настроить появление поп-апа, при этом затемнив весь остальной фон веб-страницы. Этот вариант работает во всех браузерах за исключением некоторых версий OPERA, где затемнение происходит на 100%.