有什么方法可以模糊所有页面并使用 jquery/javascript 聚焦某些 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7301174/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there any way to blur all page and focus certain div with jquery/javascript?
提问by Tural Ali
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?
有什么方法可以模糊所有页面（例如设置新背景并使用 z-index 将其置于前景）并使用 jquery/javascript 聚焦某些 div（比如说错误消息）？您知道用于此目的的任何插件吗？
That's what I wanna get:
这就是我想要的：
回答by b01
You can use the jQuery UI dialog and use CSS to change the overlay div background with a blur background image, like here:
您可以使用 jQuery UI 对话框并使用 CSS 使用模糊背景图像更改覆盖 div 背景，如下所示：
http://css-tricks.com/examples/BlurryBackgroundEffect/
http://css-tricks.com/examples/BlurryBackgroundEffect/
--or--
- 或者 -
You can use the jQuery UI dialog mixed with the CSS Text blur effect found here:
您可以将 jQuery UI 对话框与此处找到的 CSS 文本模糊效果混合使用：
http://motyar.blogspot.com/2010/04/blur-effect-with-css-and-jquery.html
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.
但是，我认为这不会与非 html5 浏览器向后兼容。
Here's a JS fiddle for proof of concept: http://jsfiddle.net/khalifah/vgGtK/
这是用于概念证明的 JS 小提琴：http: //jsfiddle.net/khalifah/vgGtK/
Here's one with the style I think you want: http://jsfiddle.net/khalifah/7L5jG/
这是我认为你想要的风格：http: //jsfiddle.net/khalifah/7L5jG/
