的HTML

Question

嘿，我怎么能做到这一点，除了1个div（这将成为一条消息）之外，基本上只有半透明的颜色覆盖整个页面

基本上，页面加载背景会被半透明黑度覆盖，但某个div（在这种情况下为消息框）保持正常。

由于

Answer 1

您可以尝试使用blockUI http://malsup.com/jquery/block/

使用jQuery BlockUI插件可以模拟使用AJAX时的同步行为，而无需锁定浏览器^[1]。激活后，它将阻止用户对页面（或页面的一部分）的活动，直到它被停用。 BlockUI向DOM添加元素，使其具有阻止用户交互的外观和行为......

[1]在同步模式下使用XMLHttpRequest对象会导致整个浏览器锁定，直到远程调用完成。这通常不是一种理想的行为。

Answer 2

做这样的事情：

的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

Fancybox这样做。如果它已经做你想要的 - 使用它。如果没有，请查看源代码并查看它是如何进行的。

http://fancybox.net/

在页面Jquery上进行透明覆盖

3 个答案:

的HTML

的CSS