Question

在Facebook上你看到一张图片，屏幕的其余部分变成灰色，直到你关闭那张照片，你才能做其他事情。它背后的逻辑是什么？它是否需要隐藏为CSS的一部分？它是用jQuery内置的代码行吗？处理这件事的正确和可接受的方法是什么？

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

Answer 1

您应该查看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%;
}

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

其次是覆盖窗口

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

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

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

Answer 2

我认为你的意思是lightbox效果。

通常使用相对于body元素绝对定位的overlay 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计算的。

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

聚焦带锁定背景的图片

2 个答案: