Javascript 单击时显示div，剩余的背景模糊

在阅读了这里的一些问题之后，我仍然怀疑如何在点击一个链接时显示一个div，比如在google plus view all friends中的链接，当我们点击view all时，页面中央会出现一个div，其余的背景会变得模糊/不透明。有人能帮我写代码吗，谢谢

---

就像这里，当我们点击上传照片时，会出现一个div，背景会变得模糊

看看jQueryUI对话框

或者在幻想中

---

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

这里是一个在JSFIDLE中为您完成的小示例

工作组： 当你点击show链接时，我们会显示一个div（在ex“opacity provider”中），这个div被设置为填充整个屏幕的样式，并应用了一些不透明度，同时它的z索引也被设置为大于当前数据，因此它位于顶部

在此之后，要显示的数据将应用一个z索引，甚至比不透明度提供程序更大，因此这将覆盖不透明部分

---

希望这有帮助

我创建了一个JSBIN，向您展示了一个不错的效果：

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

---

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

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

---

jQuery将处理模糊的“togles”。

您想要的称为“lightbox”，并且使用.no而不是lightbox最容易实现。我不能在一个灯箱中包含一个完整的php页面，它不起作用，我希望它简单得像我们点击页面中心出现的一个div链接，其余的背景变得模糊一样。是的，你可以，这是一个叫做IFramecan的东西。你再看一下帖子，我放了一张我想要答案的图片。Niels回答了你的问题。在jQueryUI演示中，你会发现这一个：哇，你做对了。。太酷了。但是一旦你点击关闭按钮，演示就不能再点击关闭按钮了here@Sakshi你说得对。我重新编辑了我的演示朋友。单击“关闭”后，我们必须隐藏元素！（我想你也很容易抓到）就像我说的。玩弄细节，该死。我被它的工作方式搞得一团糟。你解决了这个问题。顺便说一句，你的编码很快，非常感谢。这结束了我的问题，但还有一件事，我们如何使用和div相同的方式加载iframeloaded@Sakshi（很高兴有帮助！）只需将iframe/frame放在

#lightbox\u区域内

！不，实际上我的意思是，我们可以通过点击这里而不是点击来加载iframe。你说要把iframe放在#lightbox_区域内，但我想把#lightbox_区域放在iframe内，最好的答案是不使用插件或添加很多额外的代码谢谢你的帮助。这确实是有益的

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