jquery-dim-background

jQuery plugin to dim the current page except for some user-defined top elements.

Usage

Include the script in your website first. Add this script tag after your jQuery inclusion.

<script type="text/javascript" src="http://andywer.github.io/jquery-dim-background/jquery.dim-background.min.js"></script>

Usage is simple. You can dim your website, but keep some elements on top of the curtain:

<script type="text/javascript">
    $('.myElements').dimBackground();
</script> 

To switch back to normal:

<script type="text/javascript">
    $('.myElements').undim();
    // - or -
    $.undim();
</script> 

You can also provide a callback function that is called when the animation completes and you can overwrite default options:

(You may find the available options in the jquery.dim-background.js file. Have a look at $.fn.dimBackground.defaults)

<script type="text/javascript">
    $('.myElements').dimBackground({
        darkness : 0.8            // 0: no dimming, 1: completely black
    }, function() {
        // do something
    });
</script> 

Demo

Have a look at a basic example that shows what this plugin does.

License

This plugin is published under the MIT license. See license.

Have a lot of fun!