他们如何在javascript/jquery中做这种半透明叠加效果？

如果您导航到http://learn.knockoutjs.com/，您会看到一个'欢迎'款式的屏幕，这是一个半透明的叠加层，向用户介绍屏幕元素。这很漂亮。他们如何在javascript/jquery中做这种半透明叠加效果？

它看起来有点像jquery插件BlockUI，但我认为它比这更有趣。 Fancybox接近，但似乎只提供一个中心元素。查看源文件并没有多大帮助，我不是任何JS专家。

有谁知道这是如何做的或如何在页面上做类似的事情？

2011-09-08 Glinkot

Steve使用：http://trentrichardson.com/Impromptu/作为教程页面上的消息框。

你可能会喜欢这个帖子描述说，他在创造learn.knockoutjs.com使用的开源工具：http://blog.stevensanderson.com/2011/07/22/review-open-source-components-used-in-learnknockoutjs/

来源

2011-09-08 00:26:13

谢谢你。正确地回答我的问题（尽管在博客中他注意到他不喜欢那个插件，并且对它感到遗憾！）但是很高兴知道。谢谢。 – Glinkot

快速浏览一下下面的例子：

http://jsfiddle.net/2q7xT/

说明：

这可能不是最好的实现，但这个想法是存在的。首先，你将需要一个<div>，你将与任何一个半透明的黑色图像填充：

background: url(semi-transparent-image.png) repeat;

我使用的RGBA技术，但它不是由所有的浏览器都支持。

第二种解决方案是用黑色颜色，例如以填充的div：

background-color: #000;

，然后使用跨浏览器opacity CSS属性，以减少不透明度：

/* IE 8 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 

/* IE 5-7 */ 
filter: alpha(opacity=50); 

/* Netscape */ 
-moz-opacity: 0.5; 

/* Safari 1.x */ 
-khtml-opacity: 0.5; 

/* Good browsers */ 
opacity: 0.5;

最重要的部分是这个div应该有position: fixed;和z-index低于它上面元素的z-index。

来源

2011-09-08 00:19:04 Bassem

感谢您的链接！ – Glinkot

是的，它看起来像一个jQuery UI对话框插件。我实际上一直在研究创建类似的东西，这是我的理解，那些UI对话框是非常可定制的。以下是我在YouTube上找到的基本教程http://www.youtube.com/watch?v=b16V25eNyJY。希望这可以帮助。

来源

2011-09-08 00:22:14 Scott

我会检查一下斯科特，谢谢。 – Glinkot

这就是所谓的灯箱，或者，一个模态框。有几个很酷的jQuery灯箱插件。这里有几个：

我建议的fancybox或彩盒为你想要做什么。 FancyBox是我的最爱。

下面是排名前10位的jQuery插件modalbox：Top 10 jQuery Modal Box Plugins

注：只使用CSS的对话框（另一个答案已经建议做这种方式）并不好，因为你将不能够做一个很酷的衰落过渡，你不能用按钮或链接关闭它。

我希望这是有帮助的。

来源

2011-09-08 00:25:00 Nathan

好点。我遇到过其中一些，但是“整个页面覆盖多个部分”在这些例子中并不明显。将需要一些finagling：0）感谢您的帮助。 – Glinkot

@Glinkot没问题:) – Nathan

Glinkot。如果你看一下网页的源代码，它给你这样一个div：

<div id="seeThru" style="opacity: .75; height: 100%; width: 100%"></div>

从那里你可以只覆盖锚或任何其他

来源

2013-08-21 17:55:16 JFakult

如果您将该div独自复制到HTML文档中（并且添加缺少的双引号），则不会发生任何情况。 – Seanny123

他们如何在javascript/jquery中做这种半透明叠加效果？

回答

相关问题