Make transparent overlay on page Jquery

Question

Hey, how can I make it so that there's basically just a semi transparent color covering the whole page except for 1 div (which is going to be a message)

Basically, page loads background gets covered with semi transparent blackness but a certain div (message box in this case) stays normal.

Thanks

Answer 1

Fancybox does this. If it already does what you want - use it. If not, go check out the source and see how it's doing it.

http://fancybox.net/

Answer 2

Do something like this:

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>​ 

Answer 3

You could try blockUI http://malsup.com/jquery/block/