jquery - 使用 jQuery 切换不透明度图层以使网页的其余部分变暗

Question

我有一个包含 2 个主要区域的网页。标题是“固定的”，大约 40 像素高，然后是我网站其余内容所在的区域(网站尚未发布，因此无法提供链接)。与此相同的布局:

www.wookmark.com

当我单击主要内容区域中的某个图像时，我想应用一个近黑色(但具有不透明度，因此您仍然可以看到它)层，覆盖整个网站，但有我单击的图像保持不变。 500px.com 上使用了我正在尝试做的确切事情的示例。 .

如果你点击图片，它周围的一切都会变黑(即使你向下滚动页面)。

我试图通过 jquery 为 BODY 元素设置背景来实现这一点，但由于某种原因，我唯一一次让它工作了一半，它没有将它应用于“固定”标题 - 仍然是白色并保持不变，而页面的其余部分发生变化。

关于如何实现这一目标有什么建议吗？

Answer 1

您应该在主体的末尾使用具有绝对位置的 div。并在此 div 中“克隆”您的图像。

简短示例:

CSS:

.layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left : 0;
    background-color: black;
}

.layer img {
    margin: auto;
    margin-top: 50px;
}

Javascript:

$('img').click(function() {
   var layer = $('<div class="layer" />');
   $('body').append(layer);

   layer.append($(this).clone);
});

这只是一个向您展示基础知识的简短示例。您应该每次都重复使用同一层，当然您必须提供隐藏该层的方法(例如通过点击它)。

您可能希望使用外部技术来帮助您。看看灯箱:http://lokeshdhakar.com/projects/lightbox2/