Примеры Jquery, как затемнить окно

Потребовалось затемнить страницу под "всплывающим" дивом, при этом заблокировать все элементы на затемнённой странице. Вот что я навелосипедил

$("body").append('<div id="fade" ></div>');
body_height = document.height || document.documentElement.scrollHeight
$("body #fade").css("height",body_height)
$("body #fade").fadeTo(0, 0.4);

function close_div(id){
  $("#"+id).hide(100)
  $("#fade").remove()
}

В первых 4 строчка, в body добавляет div чёрного цвета со стилем

body .fade {position: absolute;top:0px;top:0px;left:0px;width:100%;height:100%;background-color:#000;z-index:1;right: 0px; bottom:0}

затем вычисляется высота всего окна (актульно для оперы) и устанавливается для этого div для перекрытия всего body, а не только видимой части, затем у без задержки меняется прозрачность до 40%

Для закрытия "всплывающих дивов используется функция close_div, следует отметить, что у всплывающих дивов должен быть z-index больше чем div[id="fade"]

В осле пока не проверял, кстати, вот таблица соответствия свойства Height в различных браузерах

Browser window.
innerHeight
document.
body.
clientHeight
document.
documentElement.
clientHeight
Opera 9.5+ strict window document window
Opera 9.5+ quirks window window document
Opera 7-9.2 window window document
Opera 6 window window N/A
Mozilla strict window document window
Mozilla quirks window window document
KHTML window document document
Safari window document document
iCab 3 window document document
iCab 2 window window N/A
IE 6+ strict N/A document window
IE 5-7 quirks N/A window 0
IE 4 N/A window N/A
ICEbrowser window window document
Tkhtml Hv3 window window document
Netscape 4 window N/A N/A

похожие страницы

  1. JQuery примеры использования
  2. Примеры Jquery, превью фотографий во всплывающем окне на событие onmouserover
  3. jQuery: простые примеры
  4. Уроки Gimp: cохранение цвета для выбранных областей
  5. jQuery, сериализация данных при обработке формы

#1:

ы

ответить  2009-08-05 19:01:41 

#2:

Можно было бы для примера вставить пример прямо в пример примера =)
(Сюда для пробы вставить рабочею версию)

ответить  2009-08-05 19:03:09 

#3:  Басманов:

вот тут, http://vensvet.ru/
после перехода из корзины к форме оформления заказа

ответить  2009-08-05 19:06:12 

#4:

http://vensvet.ru/ - в FF 3.6.8 не правильно вычислется общая высота

ответить  2010-08-27 16:01:48