Is there any way to blur all page and focus certain div with jquery/javascript?

Question

Is there any way to blur all page (for example set new background and give it to the foreground with z-index) and focus certain div (let's say error message) with jquery/javascript? Do you know any plugin for that purpose?

That's what I wanna get:

Answer 1

You can use the jQuery UI dialog and use CSS to change the overlay div background with a blur background image, like here:

http://css-tricks.com/examples/BlurryBackgroundEffect/

--or--

You can use the jQuery UI dialog mixed with the CSS Text blur effect found here:

http://motyar.blogspot.com/2010/04/blur-effect-with-css-and-jquery.html

However, I assume this will NOT be backwards compatible with non-html5 browsers.

Here's a JS fiddle for proof of concept: http://jsfiddle.net/khalifah/vgGtK/

Here's one with the style I think you want: http://jsfiddle.net/khalifah/7L5jG/