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

Question

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

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

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

Может кто-нибудь помочь мне научиться?

Answer 1

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

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

Надеюсь, это поможет.

Боб

Answer 2

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

Answer 3

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

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

Answer 4

Поместите 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;
}