Question

除了一个div之外，有没有办法在整个页面上覆盖透明度的颜色？我想要一些类似于twitter.com的“tweetbox”，其中div出现，页面上的其他内容类似于“落入阴影”，直到div被解除。如何只用HTML，CSS，Javascript和jQuery做到这一点？

Answer 1

有没有办法在整个过程中覆盖透明度的颜色页面，除了一个div？

是肯定的。（它被称为“模态”顺便说一句。您可以通过搜索“lightbox”，“modal”，“javascript对话框”以及可能的许多其他类似术语来下载一个。）

创建一个div，其高度为100％，宽度为100％，位置固定，顶部为0，左侧为0，z值为某个（高）数。

然后，创建另一个框并为其指定一个+ -11的z-index。

Answer 2

我创建了一个如何做到这一点的例子：

jsBin demo

$('.box').click(function(){
  $('.box').css({zIndex:0});
  $(this).css({zIndex:101});
  $('#overlay').fadeTo(300,1);
});

$('#overlay').click(function(){
  $(this).stop().fadeTo(300,0,function(){
    $(this).hide();
  });
});

HTML页面颜色叠加？

2 个答案:

jsBin demo