Question

所以，我有这个运行此代码的div #welcome

if ($.cookie('20120129') != '1') {
    $('#welcome').slideDown('slow');
    $.cookie('20120129', '1', { expires: 20 }); 
}

#welcome{
  position: absolute; z-index:100;
  background: #fff; color: #000;
  border: 1px solid black;
  display: none;
  width: 1000px;
  margin: 0 auto;
}
#welcome p{padding: 100px;}

我想知道如何在#welcome和具有50％opicity的页面之间设置背景图层，例如thickbox / colorbox ......

Answer 1

添加默认隐藏的固定叠加层，并在需要时显示。您可以自己将其添加到HTML结构中，也可以使用Jquery添加它。我个人会将它添加到HTML结构中。

.overlay元素的z-index必须低于#welcome，但必须高于其必须涵盖的任何其他元素：

.overlay {
    background-color: #000;
    bottom: 0;
    display: none;
    left: 0;
    opacity: 0.5;
    filter: alpha(opacity = 50); /* IE7 & 8 */
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99;
}

更新了Jquery以添加/显示叠加div：

//add overlay if it does not exist
if( $('.overlay').length == 0 ){
    $('body').append('<div class="overlay"></div>');
} 
if ($.cookie('20120129') != '1') {
    $('.overlay').show();
    $('#welcome').slideDown('slow');
    $.cookie('20120129', '1', { expires: 20 }); 
}

Answer 2

欢迎z-index为999 创建另一个具有身体大小的div，其z-index为998。对于不透明度，您只需添加0.5的不透明度：）

Answer 3

基本上你只提供一个绝对定位的div，背景为rgba（0,0,0,0.5）或不透明度为0.5。叠加层的z-index应小于welcome元素的z-index：

#welcome {
   z-index: 999;
}

#overlay {
   background: rgba(0,0,0,0.5);
   bottom: 0;
   left: 0;
   position: absolute;
   top: 0;
   right: 0;
   z-index: 998;
}

设置50％不透明度的背景黑色

3 个答案: