Make div appear and change the whole html to be darker

Question

I have a div and after I click a button, I would like the div to appear (which I can do), but I would like the whole background to become darker too (this is inline with overlay

Answer 1

The simplest thing I have seen to achieve it is this:

$("#overlay").css("-webkit-filter","blur(5px)");
$("#overlay").css("-moz-filter","blur(5px)");
$("#overlay").css("-o-filter","blur(5px)");
$("#overlay").css("-ms-filter","blur(5px)");
$("#overlay").css("filter","blur(5px)");
$("#overlay").css("pointer-events", "none");

On clicking a button we have to run above steps. "overlay" is the ID of div which we want to be blur. After successful execution of script, at the end we can do this to re-enable the div:

$("#overlay").removeAttr("style");