聚焦带锁背景的图片

在Facebook上，您看到一张图片，屏幕的其余部分变为锁定灰色，，直到您关闭该图片为止，您无法执行其他任何操作。它背后的逻辑是什么？它是我需要把隐藏作为我的CSS的一部分的对象？它是用jQuery构建的代码行吗？什么是对待这件事的正确和可接受的方法？聚焦带锁背景的图片

我知道这是jQuery，但不能笼罩我的头。

来源

2012-03-21 FedeSc

您应该检查thickbox或lightbox plugin for jQuery和other lightbox和thickbox projects。

对于其他模式对话框（位于页面上的可撤销对话框），请查看jQuery UI框架的dialog component。

如果你看看演示页面并使用浏览器内置的开发工具，你可以看到它是如何工作的。 ThickBox的例如有重叠div来禁用整个页面：

<div id="TB_overlay" class="TB_overlayBG"></div>

与下面的CSS：

#TB_overlay { 
    position: fixed; 
    z-index: 100; 
    top: 0px; 
    left: 0px; 
    height: 100%; 
    width: 100%; 
}

正如你所看到的，东西有100的z指数在最前面其余的部分，并且遍布整个页面。

其次存在重叠窗口

<div id="TB_window" ...></div>

与102的z索引中心的，是在上述覆盖层的前：

#TB_window { 
    position: fixed; 
    z-index: 102; 
    top: 50%; 
    left: 50%; 
    ... 
}

来源

2012-03-21 14:55:15

为什么downvote？ – 2012-03-21 15:00:20

由于答案大幅扩展，我收回downvote，但它开始与字面上只是“你应该检查灯箱”，甚至没有回答这个问题。 – JJJ 2012-03-21 17:22:09

@Juhana：是的，你说得对。我意识到在downvote之后，谢谢！ – 2012-03-21 20:37:00

我想你指的是lightbox效果。

它通常具有覆盖做相对绝对positionned body元素，宽度100％的宽度和高度的div：

div.overlay { 
position : absolute; 
top : 0; 
left : 0; 
width : 100%; 
height : 100%; 
}

此叠加在里面，你把你的形象，每例如：

div.overlay img { 
position : absolute; 
top : 50%; 
left : 50%; 
margin-left : /* negative half the width of your image */ 
margin-top: /* negative half the height of your image */ 
}

这只是其中一种方法（只有在知道图像尺寸的情况下才能使用）。通常通过javascript计算居中。

搜索灯箱，你会发现吨Jquery插件和教程。

来源

2012-03-21 15:00:20 mddw

聚焦带锁背景的图片

回答

相关问题