在CSS中创建叠加层？

Question

I have div that I display dynamically when certain conditions arise.

When I display the div, how can I create the effect of the background dimming and my div appearing to be prominent? much like a number of AJAX lightboxes or popups. (Thickbox, ColorBox, PrettyPhoto, etc)

I don;t quite get how they do it. I have everything else working in my own custom code except that piece.

Can anyone help me learn how?

Answer 1

Place a div over the content and set an opacity. I use this in one of my sites.

<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;
}