пятница, 1 апреля 2011 г.

Кроссбраузерное затемнение экрана на CSS+jQuery


Кроссбраузерно.

CSS:

#TB_overlay
 {
 position: fixed;
 z-index: 3; /* при необходимости можно поменять на другой */
 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");
 }

Java Script:

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>");
 }
$("#TB_overlay").fadeIn("fast");



Комментариев нет:

Отправить комментарий