我想创建当用户点击指明了网站的元素的“帮助”链接,显示帮助提示(最有可能是.png
图像)弹出一个覆盖层。覆盖帮助提示使用jQuery
我已经看到了在其他网站上完成这件事(虽然我目前还不能找到一个),借此有借此显示帮助提示在整个页面半透明叠加。然后,如果用户点击或点击“关闭”按钮,我会希望叠加层消失。
我明白这是一个很大要求,但如果有人可以点我在正确的方向,或者一个在线教程等,我会很感激:)
这里的一个例子效果我想创建一个在我的网站:
我想创建当用户点击指明了网站的元素的“帮助”链接,显示帮助提示(最有可能是.png
图像)弹出一个覆盖层。覆盖帮助提示使用jQuery
我已经看到了在其他网站上完成这件事(虽然我目前还不能找到一个),借此有借此显示帮助提示在整个页面半透明叠加。然后,如果用户点击或点击“关闭”按钮,我会希望叠加层消失。
我明白这是一个很大要求,但如果有人可以点我在正确的方向,或者一个在线教程等,我会很感激:)
这里的一个例子效果我想创建一个在我的网站:
听起来像是你正在寻找的东西像Colorbox
首先,你必须学会如何创建覆盖。这很容易通过一些基本的CSS完成。
显示帮助内容(您的PNG图像)的东西将包含在叠加元素(最可能是div
)中。你将不得不身边的位置,你可以选择做与纯CSS,或者使用类似jQuery UI的的Position帮手来帮助你。
最后,你将需要一点点的Javascript/jQuery的的开球覆盖的切换。你想读取on events in jQuery。最有可能的是,你将会附上click
。
如果你不明白,我很乐意再解释一下。其他人正在暗示插件;我试图告诉你如何自己做。 –
看看Chardin.js,这是相当不错的,易于实现
另一个很好的插件似乎夏尔丹 http://heelhook.github.io/chardin.js/
我喜欢在底部的“游”的功能,但它似乎没有给你实现所需的标记? (或者我错过了什么?) – adamdehaven
即兴旅游正是我想要的。现在,我有另外一个问题,虽然...在这里看到:http://stackoverflow.com/questions/10653471/css-overlay-effect-exclude-certain-container – adamdehaven
如果您正在寻找旅游的插件,我强烈推荐zurb的[jQuery Joyride网站浏览插件](http://zurb.com/playground/jquery-joyride-feature-tour-plugin)。否则@ guilleva的答案正是你要找的! – colllin