聚焦背景锁定的图片

Question

在Facebook上，你看到一张图片，屏幕的其余部分变成了锁定的灰色，在你关闭那张照片之前，你不能做任何其他事情。这背后的逻辑是什么？它是我需要隐藏的对象吗？它是jQuery内置的代码行吗？什么是正确和可接受的治疗方法？

我知道这是jQuery，但我无法理解这个想法。

Answer 1

您应该检查jQuery和其他lightbox和thickbox项目的thickbox或lightbox插件。

对于其他模式对话框（覆盖在页面上的对话框），请查看jQueryUI框架的对话框组件。

如果你看一下演示页面，并使用浏览器的内置开发工具，你可以看到它是如何工作的。例如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%;
}

正如你所看到的，这个东西的z索引为100，位于其余部分之上，并分布在整个页面上。

其次是叠加窗口

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

以102的z索引为中心，位于上述叠加的前面：

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

Answer 2

我想你指的是灯箱效果。

它通常使用相对于主体元素绝对定位的覆盖div来完成，宽度100%，宽度和高度：

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计算的。

搜索lightbox，你会发现大量的Jquery插件和教程。