单击图像后如何在屏幕上弹出图像

在我的代码中，表中有很多图像。 我想点击一张照片然后照片将在屏幕上以大尺寸弹出。 但我对javascript和jquery并不太了解。 我尝试这样做，但问题是它弹出一个框但不显示图片。 我知道脚本中有一个问题可以显示图片。 你可以告诉我哪里出错了，或者点击后给我一个正确的弹出图片代码。

我的标题链接在下面。 是否需要添加任何其他链接？

这是HTML部分：

 
  <img class="btn" onclick="popup()" style="width:100px; height:100px; border-radius:4px;" src="https://stackoverflow.com/questions/37826471/how-to-popup-image-over-the-screen-after-clicking-the-image/upload/">  

这是javascript：

  function popup() { w2popup.open({ title: 'Image', body: '
<img src="https://stackoverflow.com/questions/37826471/how-to-popup-image-over-the-screen-after-clicking-the-image/upload/">
' }); }  

任何人都可以帮我如何在弹出框中显示图像。 提前致谢。

Answer 1

您可以将一个类popup_image分配给img，并在DOM准备好时附加一个单击处理程序，而不是onclick属性。

我冒昧地删除了不需要演示结果的脚本和标签。

 $(document).ready(function() { $(".popup_image").on('click', function() { w2popup.open({ title: 'Image', body: '
' }); }); }); 

Answer 2

用以下任何尝试替换你的jquery：

我假设图像显示正确，您将单击

Answer 3

我建议使用Jack Moore的Colorbox。 它使用JQuery，并且可以自定义。

Colorbox： http ： //www.jacklmoore.com/colorbox/

演示： http ： //www.jacklmoore.com/colorbox/example1/

如果您不反对使用PHP，您也可以查看UberGallery。 它在内部使用colorbox，可以简单地使用

createGallery("path to dir","name of gallery"); ?>