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:
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:
Share Improve this question edited Nov 7, 2015 at 16:08 Anders 8,60810 gold badges60 silver badges99 bronze badges asked Sep 4, 2011 at 18:09 Tural AliTural Ali 23.3k18 gold badges81 silver badges133 bronze badges 1- Only with HTML5, this was discussed here – Samich Commented Sep 4, 2011 at 18:15
1 Answer
Reset to default 8You 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./examples/BlurryBackgroundEffect/
--or--
You can use the jQuery UI dialog mixed with the CSS Text blur effect found here:
http://motyar.blogspot./2010/04/blur-effect-with-css-and-jquery.html
However, I assume this will NOT be backwards patible with non-html5 browsers.
Here's a JS fiddle for proof of concept: http://jsfiddle/khalifah/vgGtK/
Here's one with the style I think you want: http://jsfiddle/khalifah/7L5jG/