jQuery Facebox dialog with opaque background

Posted September 22nd, 2009 in Javascript

A few months ago I posted how to make the web page behind a jQuery Facebox inline popup grey out using an opaque layer that would show and hide before and after the facebox dialog. A reader recently emailed me to let me know there's an easier way to do this using the undocumented opacity setting which I will show how to do in this post.

jQuery Facebox plugin

The jQuery Facebox plugin works like the inline popups over at Facebook. Go to the Facebox website to download the plugin and for more details.

Working Example

Click the buttons below to show a Facebox dialog. The first one has no background opacity; this is the default setting. The second and third set the opacity to 0.2 and 0.5 respectively which makes the background opaque and then darker opaque.

Note that if you are reading this post in a feed reader then click through to read this post in a web browser because the above buttons will not work in a reader.

The Code

Add the following into the <head> section of your page changing the /js/ and /css/ paths to the correct ones for your site and the jQuery x.x.x version number to the version you are using.

<script language="javascript" src="/js/jquery-1.3.2.min.js"></script>
<script language="javascript" src="/facebox/facebox.js"></script>
<link rel="stylesheet" type="text/css" href="/facebox/facebox.css"  />

Also add the following to the <head> section to set the opacity to a value other than the 0 default. In the following example I've set it to 0.2 which is what the second button above uses.

<script language="Javascript">

$(document).ready(function() {
    $.facebox.settings.opacity = 0.2
});

</script>

Browsers Tested

I've tested this in IE6, IE7, IE8, FF1.0, FF3.5, Chrome 4 and Safari 4 and it works perfectly.

Opera 9.0 makes the background black and not the correct opacity but I also have an install of Opera 9.64 and it works as expected in the more recent version.