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.

Please ignore this older post and instead read my newer jQuery Facebox dialog with opaque background post which shows a much simpler way of achieving the same thing as detailed in this post.

Update ends.

 

 

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:

$("body").append("<div id='opaque' style='display: none;'></div>");

$(document).bind('loading.facebox', function() {
    $("#opaque").show();
});
$(document).bind('close.facebox', function() {
    $("#opaque").hide();
});
$(document).bind('afterReveal.facebox', function() {
    // this is a fix for IE6 which resets the height to 100% of the window height
    $("#opaque").height($(document).height());
});

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.

CSS for #opaque

The CSS required for the #opaque layer is as follows:

#opaque {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 99;
    display: none;
    background-color: black;
    filter: alpha(opacity=40);
    opacity: 0.4;
}

You can adjust the opacity values and background-color to suit yourself to make the opaque layer more or less dark.