jQuery：如何使用 onClick 显示带有文本内容的图像？答案

【问题标题】：jQuery: how to display image with text content with onClick?jQuery：如何使用 onClick 显示带有文本内容的图像？
【发布时间】：2014-02-12 11:29:23
【问题描述】：

这就是我想用 jQuery 做的事情：我在一个页面上显示了四个不同的图像。当我点击一张图片时，我希望它放大并且在它旁边的某个地方，我想要附加文字，最好是在图像的侧面（或下方）。页面上的其他所有内容都必须变得模糊（也许这应该用 CSS 完成，不确定）。

我也应该能够以某种方式将其单击，也许是使用“x”按钮或单击图像/文本内容之外的内容。

由于图像将显示在页面的不同位置，我必须确保文本始终与图像保持一致。我不希望在页面的固定位置上显示所有文本的一般文本框，而是文本必须始终与图像一起出现。

有什么建议吗？

更新

好的，所以我设法通过使用 fancybox 来解决它，并且代码在 JSFiddle 中运行良好。但是，当我尝试将代码复制到 Notepad++ 时，它不再起作用了！到目前为止，我已经尝试过使用这些版本的 jQuery 和 fancybox：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

我还复制了代码以在另一个 JSFiddle 项目中使用，但它也停止了工作。这怎么可能？它是如何从正常工作到完全不工作的？

【问题讨论】：

标签： jquery image text onclick popup

【解决方案1】：

而不是这个：

<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

这样做：

<link rel="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

【讨论】：