0

我有一个包含 2 个主要区域的网页。标头“固定”且高约 40 像素，然后是我的网站其余内容所在的区域下方（网站尚未发布，因此很遗憾无法提供链接）。与此相同的布局：

www.wookmark.com

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

如果您单击图像，它周围的其他所有内容都会变黑（即使您向下滚动页面）。

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

关于如何实现这一目标的任何建议？

4

1 回答 1

0

您应该在身体末端使用具有绝对位置的 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/

于 2012-12-13T10:03:36.983 回答