jQuery Plugin To Dim The Current Page Background - Dim Background

Dim Background is a simple jQuery plugin that allows to dim the current page background to highlight the user-defined top element, similar to the lightbox overlay effect. For example, you can create a top element that anything else on the page becomes dimmed when you hover over it.

Basic Usage:

1. Include jQuery library and jQuery Dim Background plugin on the web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="../jquery.dim-background.js"></script>

2. Create a top element

<div id="actionBox">
...
</div>

3. The javascript

<script type="text/javascript">
$(function(){
$('#actionBox')
.mouseenter(function(){
$(this).dimBackground({
darkness : 0.8  // 0: no dimming, 1: completely black
});
})
.mouseleave(function(){
$(this).undim();
});
});
</script>

Change logs:

2015-01-22

• v1.3.1

2014-06-28

• Fixed a bug.

---

This awesome jQuery plugin is developed by andywer. For more Advanced Usages, please check the demo page or visit the official website.