具有弹出模块的多个元素

Question

我有一个模式弹出的例子，其中滚动在后面被阻塞，但它是在弹出本身中启用的。

看看我的例子：这里的例子

我的问题是，我希望在网站上有一个图像网格：

看看我指的是什么样的网格：在这里输入链接描述

当一个用户点击其中一个图片后，他会得到一个弹出的不同图像。当然，弹出的图片对于用户点击的每一张照片都是不同的，这是一个不同项目的组合。

问题:在我想结合这两个例子之后，jQuery弹出窗口就停止工作了。

Answer 1

如果在HTML中保持这样的结构：

<a href="#" class="info" id="overlay1">...</a>
<div class="overlay">Content for overlay 1</div>
<a href="#" class="info" id="overlay2">...</a>
<div class="overlay">Content for overlay 2</div>

注意id，因为它必须是唯一的，不能在文档中是多个的。

然后，您需要更改您的函数，使其由类名而不是id处理，如下所示：

$(".info").click(function(event) {
  var ne = $(this).next('div.overlay');
  event.preventDefault();
  ne.fadeToggle(500);
  return false;
  $(".close").click(function(event) {
    event.preventDefault();
    ne.fadeToggle(500);
  });
});

检查这个CodePen

Answer 2

我认为您希望在关闭函数中将溢出从visible更改为auto。