jquery - 聚焦锁定背景的图片

Question

在 Facebook 上，您看到一张图片，屏幕的其余部分变成锁定的灰色，在您关闭该图片之前，您无法执行任何其他操作。其背后的逻辑是什么？它是我需要隐藏的对象作为我的 CSS 的一部分吗？它是用 jQuery 内置的代码行吗？处理这个东西的正确和可接受的方法是什么？

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

Answer 1

你应该检查 thickbox或 lightbox plugin for jQuery和 other lightbox和 thickbox projects .

对于其他模态对话框(位于页面上并禁用它)，请查看 dialog component jQuery UI 框架。

如果您查看演示页面并使用浏览器的内置开发工具，您可以了解它是如何工作的。 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，位于其余部分之上，并在整个页面上拉伸(stretch)。

其次是叠加窗口

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

以 z-index 为 102 为中心，在上面提到的叠加层之前:

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