如何创建 BBC 风格(facebox?)帮助弹出窗口

发布于 2024-08-28 15:39:15 字数 309 浏览 9 评论 0原文

我试图拆开代码,但似乎无法复制它。

在 BBC 天气主页上,http://news.bbc.co.uk/weather/,您将在右上角的圆圈或某些框中看到一个小帮助问号。当你点击它时,它会弹出一个很好的帮助弹出窗口,看起来有点像 Facebook。

我最喜欢的是这个小箭头,它指向容器右侧的帮助按钮。 Facebox只是一个标准的正方形。

如果有人知道如何复制此内容,我们将不胜感激。

问候, 伊恩

I have tried to take apart the code, but can't seem to replicate it.

On the BBC weather homepage, http://news.bbc.co.uk/weather/, you will see a little help quetionmark in a circle in the top right corner or some of the boxes. When you click on it, it brings up a nice help popup, that looks a little like facebox.

The main thing I like about this, is the little arrow that points back to the help button to the right of the container. Facebox is just a standard square.

If anyone knows how to replicate this, some help would be greatly appreciated.

Regards,
Ian

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

小伙你站住 2024-09-04 15:39:15

该效果称为模态窗口,主要由 Lightbox javascript 库 普及。如今,有很多库可以创建这种效果,但最流行的往往是使用 jQuery JavaScript 框架

我个人最喜欢的 jQuery 实现是 ColorBox (一个轻量级、可定制的 jQuery 1.3 和 1.4 灯箱插件)。查看演示页面上的其他内容类型部分 与 BBC 上看到的类似的例子。

The effect is known as a modal window and was popularised primarily by the Lightbox javascript library. Nowadays, there are many libraries to create this kind of effect, but the most popular tend to use the jQuery JavaScript framework.

My personal favourite jQuery implementation is ColorBox (A light-weight, customizable lightbox plugin for jQuery 1.3 and 1.4). Look at the Other Content Types section on their demo page for examples of something similar to that seen on BBC.

很糊涂小朋友 2024-09-04 15:39:15

我通过在页面上使用隐藏的 DIV 完成了类似的操作。然后,我将 javascript 事件附加到图标 (?) 以切换 DIV 的可见性。对于“弹出窗口”的形状,在我看来,这可能只是一个背景图形。

如果您有兴趣,我在 www.sitemills.com/prices.php 上有一个示例。相当确定 JavaScript 已嵌入,因此您应该能够查看源代码。

I've done something similar to this by using a hidden DIV on the page. I then attached a javascript event to the icon (?) to toggle the visibility of the DIV. For the shape of the 'pop-up', seems to me that could just be a background graphic.

I have an example of that on www.sitemills.com/prices.php if you're interested. Fairly sure the javascript is embedded so you should be able to do a view-source.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文