Question

如果您导航到http://learn.knockoutjs.com/，您会看到一个'欢迎'样式的屏幕，这是一个半透明的叠加层，可以将用户引入屏幕元素。这太漂亮了。

它看起来有点像jquery插件BlockUI，但我认为它比那更加花哨。 Fancybox很接近，但似乎只提供一个中心元素。查看源代码对我没有多大帮助，无论如何我都不是JS专家。

有人知道这是怎么做的，或者如何在页面上做类似的事情？

Answer 1

快速浏览下面的示例：

<强>解释

这可能不是最佳实施，但这个想法就在那里。首先，您将需要<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。

Answer 2

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

您可能会喜欢这篇文章，其中介绍了他在创建learn.knockoutjs.com时使用的开源工具：http://blog.stevensanderson.com/2011/07/22/review-open-source-components-used-in-learnknockoutjs/

Answer 3

这称为灯箱，或模式框。有几个很酷的jQuery灯箱插件。以下是一些：

FancyBox
ColorBox
LightView

我建议您使用FancyBox或ColorBox进行操作。 FancyBox是我最喜欢的。

以下是十大jQuery模态框插件：Top 10 jQuery Modal Box Plugins

注意：仅使用CSS作为对话框（另一个答案建议按照这种方式进行）并不是那么好，因为你将无法进行很酷的渐变过渡而你无法用一个按钮关闭它或链接。

我希望这有用。

Answer 4

是的，它有点像jquery ui对话框插件。我实际上一直在寻找创建类似的东西，这是我的理解，那些ui对话框是可定制的。这是我在youtube http://www.youtube.com/watch?v=b16V25eNyJY上找到的基本教程。希望这会有所帮助。

Answer 5

Glinkot。如果您查看网页源代码，它会为您提供如下div：

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

从那里你可以叠加锚点或其他任何东西

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

5 个答案: