Hacer superposición transparente en la página Jquery

Question

Hey, ¿cómo puedo hacerlo de modo que hay básicamente sólo un color semi transparente que cubre toda la página a excepción de 1 div (que va a ser un mensaje)

Básicamente, carga la página el fondo se cubre con negrura semitransparente, pero cierto div (cuadro de mensaje en este caso) se mantiene normal.

Gracias

Answer 1

Usted podría intentar blockUI http://malsup.com/jquery/block/

El complemento jQuery BlockUI le permite simular el comportamiento sincrónico cuando usa AJAX, sin bloquear el navegador ^[1]. Cuando se activa, evitará la actividad del usuario con la página (o parte de la página) hasta que se desactive. BlockUI añade elementos al DOM para darle el aspecto y el comportamiento de bloqueo de la interacción del usuario ...

[1] Utilizando el objeto XMLHttpRequest en modo síncrono hace que todo el navegador para bloquear hasta que la llamada remota completa. Esto generalmente no es un comportamiento deseable.

Answer 2

Fancybox does this. Si ya hace lo que quiere, úselo. De lo contrario, consulte la fuente y vea cómo lo está haciendo.

http://fancybox.net/

Answer 3

hacer algo como esto:

html

<div id="lightbox_background"> 
    <div id="lightbox_container"> 
     <div id="lightbox_header"> 
     <span class="close"><a href="javascript:void(0);" onclick="activity_feed_close()">close</a> <a href="javascript:void(0);" onclick="activity_feed_close()"><img src="http://design.vitalbmx.com/images/x_button.gif" /></a></span> 
     </div> 
     <div id="lightbox_content"> 
     <p>Some text</p> 
     </div> 
    </div> 
    </div> 

css

<style type="text/css"> 
div#lightbox_background { 
    display:none; 
    position:fixed; 
    top:0; 
    left:0; 
    height:100%; 
    width:100%; 
    background: transparent url(http://design.vitalbmx.com/images/transp_30.png) repeat; z-index:1100; 
} 
div#lightbox_container { 
    background: #f6f6f6 url(http://design.vitalbmx.com/images/lb_container_bg.gif) right top repeat-y; 
    margin:16px 32px; 
} 
div#lightbox_container div#lightbox_header { 
    padding:5px 5px 0; text-align:right; 
} 
div#lightbox_container div#lightbox_content { 
    width:100%; 
    min-height:500px; 
} 
</style>​