From jQuery JavaScript Library

Intro

This plugin can be used to create a lightbox type of effect. You can position other elements over the dimming to create this type of effect.

Note: Make sure anything you want lightboxed has a z-index of 1000 or more, as this plugin sets the dimming to a z-index of 999.

Note: Seems to require the Dimensions plugin

Usage

$.dimScreen(speed, opacity, callback);

You can also stop the dimming:

$.dimScreenStop();

Example

$.dimScreen(1000, 0.7, function() {
    $('#myElement').fadeIn();
});

Code

//dimScreen()
//by Brandon Goldman
jQuery.extend({
    //dims the screen
    dimScreen: function(speed, opacity, callback) {
        if(jQuery('#__dimScreen').size() > 0) return;
        
        if(typeof speed == 'function') {
            callback = speed;
            speed = null;
        }

        if(typeof opacity == 'function') {
            callback = opacity;
            opacity = null;
        }

        if(speed < 1) {
            var placeholder = opacity;
            opacity = speed;
            speed = placeholder;
        }
        
        if(opacity >= 1) {
            var placeholder = speed;
            speed = opacity;
            opacity = placeholder;
        }

        speed = (speed > 0) ? speed : 500;
        opacity = (opacity > 0) ? opacity : 0.5;
        return jQuery('<div></div>').attr({
                id: '__dimScreen'
                ,fade_opacity: opacity
                ,speed: speed
            }).css({
            background: '#000'
            ,height: $(document).attr('height') + 'px'
            ,left: '0px'
            ,opacity: 0
            ,position: 'absolute'
            ,top: '0px'
            ,width: $(document).attr('width') + 'px'
            ,zIndex: 999
        }).appendTo(document.body).fadeTo(speed, opacity, callback);
    },
    
    //stops current dimming of the screen
    dimScreenStop: function(callback) {
        var x = jQuery('#__dimScreen');
        var opacity = x.attr('fade_opacity');
        var speed = x.attr('speed');
        x.fadeOut(speed, function() {
            x.remove();
            if(typeof callback == 'function') callback();
        });
    }
});