使頁面上的Jquery

Question

透明覆蓋嘿，我怎樣才能讓這個有本質上只是一個半透明顏色覆蓋整個頁面，除了1個格（這將是一個消息）

基本上，頁面加載背景被半透明黑度覆蓋，但某個div（本例中的消息框）保持正常。

謝謝

Answer 1

你可以嘗試blockUI http://malsup.com/jquery/block/

jQuery BlockUI插件允許您在使用AJAX時模擬同步行爲，而不鎖定瀏覽器^[1]。激活後，它將阻止用戶使用該頁面（或頁面的一部分）的活動，直到該頁面停用。 BlockUI添加元素的DOM給它的外觀和阻塞的用戶交互的行爲...

[1]在同步模式使用XMLHttpRequest對象使整個瀏覽器鎖定，直到遠程調用完成。這通常不是一個理想的行爲。

Answer 2

Fancybox這樣做。如果它已經做了你想要的 - 使用它。如果沒有，請查看源代碼並查看它是如何實現的。

http://fancybox.net/

Answer 3

做這樣的事情：

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