使用jQuery覆盖帮助提示

Question

如果用户点击显示帮助提示（很可能是.png图片）指出网站元素的“帮助”链接，我想创建一个覆盖图层。

我已经在其他网站上看到过这种情况（虽然我目前无法找到），整个页面上都有一个半透明的叠加层，可以显示帮助提示。如果用户点击或点击“关闭”按钮，我会希望叠加层消失。

我知道这有很多问题，但是如果有人能指出我正确的方向，或者在线教程等等，我真的很感激：）

以下是我想在我的网站上创建的效果示例：

Answer 1

看一下Chardin.js，它非常好用且易于实现

Answer 2

看一下Impromptu插件

http://trentrichardson.com/Impromptu/

Answer 3

另一个好的插件似乎是chardin http://heelhook.github.io/chardin.js/

Answer 4

首先，您必须了解如何创建叠加层。这可以通过一些基本的CSS轻松完成。

显示帮助内容的东西（你的PNG图像）将包含在overlay元素中（很可能是div）。你将不得不定位它们，你可以选择使用纯CSS，或使用jQuery UI的Position助手来帮助你。

最后，您将需要一些Javascript / jQuery来启动叠加层的切换。您想要阅读on events in jQuery。最有可能的是，你将会附加在click上。

Answer 5

听起来像是在找Colorbox

之类的东西