Создание наложения в CSS?

Question

У меня есть div, который я динамически отображаю при возникновении определенных условий.

Когда я показываю div, как я могу создать эффект затухания фона, и мой div окажется заметным? очень похоже на несколько лайтбоксов или всплывающих окон AJAX. (Thickbox, ColorBox, PrettyPhoto и т. Д.)

Я не совсем понимаю, как они это делают. У меня есть все, что работает в моем собственном коде, кроме этой части.

Может ли кто-нибудь помочь мне узнать, как?

Answer 1

Поместите div над содержимым и установите непрозрачность. Я использую это на одном из моих сайтов.

<div id="error_wrapper"> 
    <div id="site_error"> 
     Error: 
    </div> 
</div> 

div#error_wrapper { 
    z-index: 100; 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    background-color: #000000; 
    top: 0px; 
    left: 0px; 
    opacity: 0.7; 
    filter: alpha(opacity=70); 

} 

div#site_error { 
    position: fixed; 
    top: 200px; 
    width: 400px; 
    left: 50%; 
    margin-left: -200px; 
} 

Answer 2

Если создать слой, который является полной шириной & высоты вашей страницы и дать ему более высокий индекс г, чем вся вашей страница, вы можете создать этот эффект. Затем положите свой появляющийся div над ним.

Answer 3

Просто используйте глобальный DIV размера страницы, чтобы покрыть любое другое содержание:

http://jsfiddle.net/CHkNd/1/

Answer 4

Вот пример, который вы можете играть с.

http://jsfiddle.net/r77K8/1/

Надеется, что это помогает.

Bob