If you would like to blur the background, you would need to add a css blur filter to the element that contains all of your normal content. In addition, it looks like you want to grey it out too.
Here is a link to the jFiddle: http://jsfiddle.net/edMa4/6/
CSS
.blur {
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}
#overlay {
position: fixed;
display: none;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background: rgba(255,255,255,.8);
z-index: 999;
}
JavaScript
var myBlurFunction = function(state) {
/* state can be 1 or 0 */
var containerElement = document.getElementById('main_container');
var overlayEle = document.getElementById('overlay');
if (state) {
overlayEle.style.display = 'block';
containerElement.setAttribute('class', 'blur');
} else {
overlayEle.style.display = 'none';
containerElement.setAttribute('class', null);
}
};
to activate:
<a href="javascript:myBlurFunction(1);">Blur</a>
to disable:
<a href="javascript:myBlurFunction(0);">No blur</a>
These are the basic things you'd need to blur and grey out the content of the main_container element - though you would need to make adjustments depending upon additional functionality you seek.