jQuery Facebox dialog with greyed out background

Yesterday I posted how to grey out a web page which is useful when showing a Javascript dialog box and in this post show how to do the same when using the jQuery Facebox plugin. The Facebox plugin makes dialog boxes that look like the ones in Facebook.

Update September 22nd 2009

Thanks to an email from one of my visitors I have learnt that Facebox already has the ability to an opaque background built-in and it's just a matter of changing one of the default settings.

By Default

By default the Facebox plugin just positions the dialog box in the window and doesn't change the background at all; by making the background greyed out it gives more focus to the popup.

Example

First of all, an example to show you what I mean. Click the "Open Facebox Dialog" button below and the Facebox dialog box will open and the web page will become greyed out thanks to an opaque layer that will be made visible.

Note that if you are viewing this post in an RSS reader you'll need to click through to view it in a web browser to make the above button work.

The code

You'll need to get the Facebox plugin and then can use the following Javascript code to make the above work:

The opaque div is appended to the document in the jQury code above (or you could alternatively code it into the HTML, but this saves having to do it) and then showing and hiding the opaque layer is bound to the facebox dialog as it loads and closes.

The afterRevel.facebox binding is a fix for IE6 which changes the height of the opaque div after the facbox div is loaded; the fix changes it back to the full document height.