Затемнение

Для затемнения (или, наоборот, прояснения) страницы или только некоторой ее части можно сделать следующее:

Абсолютно позиционировать графическое изображение размером 1x1px, растянутое до размеров затемняемой области.
Для затемняющего изображения задать стилевой параметр прозрачности. Для IE 8 и более ранних версий это filter:alpha(opacity=число от 0 до 100,style=число от 0 до 3), а для остальных браузеров — opacity:число от 0 до 1
Затемняющее графическое изображение экранирует элементы затемняемой области. В частности ссылки на ней и другие элементы пользовательского интерфейса не будут работать. Поэтому, если вы хотите создать эффект постепенного прояснения области (используя, например,метод setInterval() или setTimer()), то в конце, при достижении полной прозрачности, необходимо для графического изображения установить стилевой параметр display:none.

В приведенном здесь примере затемняющее изображение задано тегом:

<img src="../black.png" id="dark" width="100%" height="1500"
     style="position:absolute;top:0;left:0;display:none" />

Ради IE 8 и более ранних версий следует определить стилевой параметр filter:

<!--[if IE]>
  <style type="text/css">
    #dark {filter:alpha(opacity=100)}
  </style>
<![endif]-->

Файл black.png содержит черный квадрат размером 1x1 px. В исходном состоянии он не отображается. При щелчке на кнопке вызывается функция shadow(), делающая его видимым и запускающая процесс постепенного увеличения прозрачности, который завершается установкой параметра display:none.