Как при вызове поп-апа затемнить остальной фон сайта
Эта проблема решается довольно просто. К нам на выручку, опять же, придет библиотека 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%.
