Кроссбраузерное полупрозрачное затемнение фона

Подготовил: Евгений Рыжков Дата публикации: 11.02.2009
Последнее обновление: 22.09.2009

Задача

Сделать полупрозрачный кроссбраузерный фон. Проблем такое сделать нет, если бы не IE6, который не понимает position: fixed. Для решения этой проблемы используем CSS код:

#TB_overlay {
position: fixed;
z-index: 100;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #000;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=55);
-moz-opacity: 0.55;
-khtml-opacity: 0.55;
opacity: 0.55;
}
* html #TB_overlay {
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + "px");
}

P.S. в примере в качестве фона используется <div>. Для нормальной работы с IE6, нужно использовать iframe, чтобы получилось перекрыть select. Используя библиотеку jQuery можно воспользоваться следующим условием:

if(!jQuery("body").find("#TB_overlay").is("div")) /* если фон уже добавлен не добавляем повторно */
{
   if(!jQuery.browser.msie) /* если браузер не ИЕ фоном будет div */
   jQuery("body").append("<div id='TB_overlay'></div>");
   else /* иначе добавляем iframe */
   jQuery("body").append("<div id='TB_overlay'><iframe scrolling='no' frameborder='0' style='position: absolute; top: 0; left: 0; width: 100%; height: 100%; filter:alpha(opacity=0)'></iframe></div>");
}

Проверено в:

update 9.07.2010 by F0rmateg чтоб не использовать iframe для IE6 можно скрывать (display: none) все select при показе фона.

По теме

Теги:
Показать комментарии