Blur The Background When Click Drop Down Menu Appear

I want to have the entire background page is blur when click on a button and drop down appear, but some how the blur background didn't show up. Please give me a hand. This is HTML

Solution 1:

Check this Updated Demo Fiddle

JS:

$('.clicker').click(function () {
    $('body').toggleClass('overlay');
});

CSS :

.overlay {
    position:absolute;
    /* color with alpha transparency */background-color: rgba(0, 0, 0, 0.3);
    /* stretch to screen edges */top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

• The class click-nav is the parent <div> and not the button.
• Remove display:none from .overlay css.