How to create a BBC style (facebox?) help popup

Question

Hi guys,

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

Answer 1

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.

Answer 2

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.