Question

！[在这里输入图片说明] [1]在这里阅读了一些问题之后，仍然怀疑如何在点击链接时出现div，如google中的链接加上查看所有朋友，当我们点击查看全部然后一个div出现在页面的中心，其余的背景变得模糊/不透明。任何人都可以帮我代码，谢谢

就像这里当我们点击上传照片时出现div并且背景变得模糊不清

Answer 1

我创建了一个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'});
});

这只是一个想法，现在取决于您玩细节！

<小时/> 你需要： - 隐藏的DIV（#lightbox）位置：绝对显示：隐藏，将覆盖您的所有页面。为了获得最初的~crossbrowser'模糊'效果，只需将背景设为白色.png 50％透明 - 要创建模糊效果，必须使“主”文本透明并设置初始“0px”模糊：

color: transparent;
text-shadow:0px 0px 0px #000;

比jQuery会处理模糊'togles'。

Answer 2

以下是jsfiddle中为您完成的一小部分示例 http://jsfiddle.net/pramodpv/KwzWn/

工作：当你单击show链接时，我们显示一个div（在ex“opacity-provider”中），这个div被设置为填充整个屏幕并且应用了一些不透明度，并且它的z-index被放置使得它大于当前的数据使它成为最重要的。

在此之后，您要显示的数据应用的z-index甚至大于不透明度提供者，因此这将覆盖不透明部分。

希望这会有所帮助!!

Answer 3

查看jQueryUI对话框http://jqueryui.com/demos/dialog/

或在fancyform http://www.fancyform.net

有一些示例和演示它们是如何工作的。

在其余的背景模糊点击显示div

3 个答案:

DEMO