开发者

Make transparent overlay on page Jquery

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 goi开发者_StackOverflow社区ng 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


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

The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser[1]. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction...

[1] Using the XMLHttpRequest object in synchronous mode causes the entire browser to lock until the remote call completes. This is usually not a desirable behavior.


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


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/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜