javascript - 为在外部单击时关闭的图库图像创建预览效果

Question

我正在制作一个预览框，当您单击图库图像时会弹出该预览框，并且需要在您单击其外部时使其消失。我找到了很多解决方案，但没有一个适用于我的代码。我认为问题是我可能需要一个 while 循环，但我尝试了几个条件，但都是无限的。

这是我尝试的最后一个解决方案。预览有效，但我无法在单击退出时将其关闭。

DEMO

$('.portPic').click(function() {
  if ($(this).attr('data-src2')) {
    $('#clickedImg').attr('src', $(this).attr('data-src2'));
  } else {
    $('#clickedImg').attr('src', $(this).attr('src'));
  }
  $('#clickedImg').css('visibility', 'visible');
  $('#clickedImg').blur(function() {
    $('#clickedImg').css('visibility', 'hidden');
  });
});

Answer 1

我用弹出菜单做了类似的事情，用户点击“关闭”菜单然后关闭。这里也可以应用同样的方法。

我使用了一个覆盖整个屏幕的覆盖 div(具有半透明的不透明度 - 可能是 0.6 黑色或类似的颜色；或者任何你想要的颜色)，它提供了一个很好的模态效果。给它一个 id - 让我们说 modal-overlay。

您可以在页面代码中将其设置为静态，并将 display 设置为 none 并使其成为页面的完整尺寸(通过 CSS 类)。

<div id="modal-overlay" class="full-screen-overlay"></div>

将叠加层的 z-index 设置为高于页面的其余部分，并将弹出窗口的 z-index 设置为高于叠加层。然后，当您显示弹出窗口时，也将 modal-overlay 的可见性也设置为可见。

在您的脚本代码中，为单击模态 div 时放置一个事件处理程序:

$('#modal-overlay').click(function() {
        $('#clickedImg').hide();
        $('#modal-overlay').hide();
    })

我还会使用 .hide() jQuery 方法，这比键入可见性更容易。

更好的是，如果你有超过 1 件事正在进行(你会用模态覆盖)，将弹出窗口的“显示/隐藏”包装在 hidePopup() 或 closePopup() 方法并调用 onClick 以节省重复使用的代码。

对于打开弹出窗口/叠加层时的效果，您还可以使用 jQuery 动画，例如 .fadeIn() 或 .slideDown()。使用 fadeOut 和 slideUp 隐藏。

这些动画还执行显示/隐藏，因此您不需要调用 .hide() 或 .show()。

查看 this link到 jQuery 的动画 API 文档。非常有用，值得一读。

希望这对您有所帮助!