javascript - HTML页面颜色叠加？

Question

除了一个 div 之外，有没有办法在整个页面上覆盖带有透明度的颜色？我想要 twitter.com 的“tweetbox”之类的东西，其中出现一个 div，页面上的所有其他内容都“落入阴影”，直到 div 被解除。仅使用 HTML、CSS、Javascript 和 jQuery 怎么可能做到这一点？

Answer 1

除了一个 div 之外，有没有办法在整个页面上覆盖带有透明度的颜色？

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

创建一个具有 100% 高度、100% 宽度、固定位置、顶部 0、左侧 0 和某个（高）数字的 z-index 的 div。

然后，创建另一个盒子并给它一个该数字 + 1 的 z-index。

Answer 2

我创建了一个示例来说明我将如何做到这一点：

jsBin 演示

$('.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();
  });
});