javascript 单击时显示 div，其余背景模糊
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8139288/
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
show div on click with rest of background blur
提问by Sakshi Sharma
![enter image description here][1]after reading some questions here , still i m doubtful about how to make a div appear on click on a link like the one in google plus view all friends , when we click on view all then a div appears on the center of the page and rest of background goes blur/opaque . can any one help me with the code , thanks
！[在此处输入图片描述][1]在阅读了此处的一些问题后，我仍然怀疑如何在单击 google 中的链接时显示 div 加查看所有朋友，当我们单击查看所有然后一个 div出现在页面的中心，其余的背景变得模糊/不透明。谁能帮我码一下，谢谢
like here when we click on upload photos a div appear and the background gets little blur
就像这里当我们点击上传照片时会出现一个 div 并且背景变得有点模糊
回答by Roko C. Buljan
I created a JSBIN to show you a nice effect:
我创建了一个 JSBIN 来展示一个不错的效果：
DEMO
演示
$('.open').click(function(){
$('#lightbox').fadeTo(1000, 1);
$("#wrapper").css({'text-shadow': '0px 0px 10px #000'});
});
$('.close').click(function(){
$('#lightbox').hide();
$("#wrapper").css({'text-shadow': '0px 0px 0px #000'});
});
This is just an idea, now is up to you to play with details!
这只是一个想法，现在由您来处理细节！
您需要： - 隐藏的 DIV (#lightbox) position:absolute display:hidden 将覆盖您的所有页面。要获得初始的 ~crossbrowser 'blurish' 效果，只需将白色 .png 50% 透明设置为背景即可。
- 要创建模糊效果，只需使“主”文本透明并设置初始“0px”模糊：
color: transparent;
text-shadow:0px 0px 0px #000;
than the jQuery will handle the blur 'togles'.
比 jQuery 将处理模糊“togles”。
回答by Pramod Pallath Vasudevan
Here is a small sample done for you in jsfiddle http://jsfiddle.net/pramodpv/KwzWn/
这是在 jsfiddle http://jsfiddle.net/pramodpv/KwzWn/ 中为您完成的一个小示例
The working: When you click the show link, we show a div (in the ex "opacity-provider"), this div is styled to fill the entire screen and some opacity is applied, also its z-index is put such that it is greater than the current data so that it comes on top.
工作：当您单击显示链接时，我们会显示一个 div（在前“不透明度提供者”中），该 div 的样式设置为填充整个屏幕并应用一些不透明度，并且其 z-index 也被放置成这样大于当前数据，因此它位于顶部。
After this the data which you want to show is applied a z-index even greater than the opacity-provider, so this comes over the opaque part.
在此之后，您要显示的数据应用了比不透明度提供程序更大的 z-index，因此这会覆盖不透明部分。
Hope this helps!!
希望这可以帮助！！
回答by Niels
Look at the jQueryUI dialog http://jqueryui.com/demos/dialog/
查看 jQueryUI 对话框http://jqueryui.com/demos/dialog/
or at fancyform http://www.fancyform.net
或在fancyform http://www.fancyform.net
There are examples and demos how they work.
有示例和演示它们是如何工作的。
