2012-05-17 70 views
10

我想创建当用户点击指明了网站的元素的“帮助”链接,显示帮助提示(最有可能是.png图像)弹出一个覆盖层。覆盖帮助提示使用jQuery

我已经看到了在其他网站上完成这件事(虽然我目前还不能找到一个),借此有借此显示帮助提示在整个页面半透明叠加。然后,如果用户点击或点击“关闭”按钮,我会希望叠加层消失。

我明白这是一个很大要求,但如果有人可以点我在正确的方向,或者一个在线教程等,我会很感激:)

这里的一个例子效果我想创建一个在我的网站: jquery overlay website help tips

回答

8
+0

我喜欢在底部的“游”的功能,但它似乎没有给你实现所需的标记? (或者我错过了什么?) – adamdehaven

+0

即兴旅游正是我想要的。现在,我有另外一个问题,虽然...在这里看到:http://stackoverflow.com/questions/10653471/css-overlay-effect-exclude-certain-container – adamdehaven

+1

如果您正在寻找旅游的插件,我强烈推荐zurb的[jQuery Joyride网站浏览插件](http://zurb.com/playground/jquery-joyride-feature-tour-plugin)。否则@ guilleva的答案正是你要找的! – colllin

0

听起来像是你正在寻找的东西像Colorbox

1

首先,你必须学会​​如何创建覆盖。这很容易通过一些基本的CSS完成。

显示帮助内容(您的PNG图像)的东西将包含在叠加元素(最可能是div)中。你将不得不身边的位置,你可以选择做与纯CSS,或者使用类似jQuery UI的的Position帮手来帮助你。

最后,你将需要一点点的Javascript/jQuery的的开球覆盖的切换。你想读取on events in jQuery。最有可能的是,你将会附上click

+0

如果你不明白,我很乐意再解释一下。其他人正在暗示插件;我试图告诉你如何自己做。 –