他们如何在 javascript/jquery 中实现这种半透明叠加效果？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7341825/
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
How do they do this semi-transparent overlay effect in javascript/jquery?
提问by Glinkot
If you navigate to http://learn.knockoutjs.com/you get a 'welcome' style screen which is a semi-transparent overlay that introduces users to the screen elements. It's nifty.
如果您导航到http://learn.knockoutjs.com/，您会看到一个“欢迎”风格的屏幕，它是一个半透明的覆盖层，向用户介绍屏幕元素。它很漂亮。
It looks a little like the jquery plugin BlockUI, but I think it's something a bit more fancy than that. Fancybox comes close, but seems to only offer a single centre element. Viewing source didn't help me much, I'm not a JS expert by any means.
它看起来有点像 jquery 插件 BlockUI，但我认为它比这更花哨。Fancybox 很接近，但似乎只提供一个中心元素。查看源代码对我没有多大帮助，无论如何我都不是 JS 专家。
Does anyone know how this is done or how to do something similar on a page?
有谁知道这是如何完成的或如何在页面上做类似的事情？
采纳答案by RP Niemeyer
Steve used: http://trentrichardson.com/Impromptu/for the message boxes on the tutorial pages.
Steve 使用：http: //trentrichardson.com/Impromptu/作为教程页面上的消息框。
You might like this post that describes the open source tools that he used in creating learn.knockoutjs.com: http://blog.stevensanderson.com/2011/07/22/review-open-source-components-used-in-learnknockoutjs/
您可能会喜欢这篇描述他在创建 learn.knockoutjs.com 时使用的开源工具的帖子：http: //blog.stevensanderson.com/2011/07/22/review-open-source-components-used-in- learnknockoutjs/
回答by Bassem
Have a quick look at the example below:
快速看一下下面的例子：
Explanation:
解释：
This is probably not the best implementation but the idea is there. First you will be needing a <div>which you will fill with either a semi-transparent black image:
这可能不是最好的实现，但想法就在那里。首先，您将需要一个<div>用半透明黑色图像填充的图像：
background: url(semi-transparent-image.png) repeat;
I used the RGBA technique but it's not supported by all browsers.
我使用了 RGBA 技术，但并非所有浏览器都支持它。
The second solution is to fill the div with a black color such as:
第二种解决方案是用黑色填充 div，例如：
background-color: #000;
and then use the Cross-browser opacitycss attribute to reduce the opacity:
然后使用跨浏览器opacitycss 属性来降低不透明度：
/* 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;
The most important part is that this div should have position: fixed;and a z-indexlower than the z-indexof the element above it.
最重要的部分是这个 div 应该有position: fixed;一个z-index低于z-index它上面元素的 。
回答by Nathan
That's called a lightbox, or, a modal box. There are several cool jQuery lightbox plugins. Here are a few:
这就是所谓的灯箱，或者，模态框。有几个很酷的 jQuery 灯箱插件。这里有一些：
I suggest FancyBox or ColorBox for what you're trying to do. FancyBox is my favorite.
我建议您尝试使用 FancyBox 或 ColorBox。FancyBox 是我的最爱。
Here are the top 10 jQuery modalbox plugins: Top 10 jQuery Modal Box Plugins
以下是排名前 10 的 jQuery 模态框插件：排名前 10 的 jQuery 模态框插件
Note: Using only CSS for a dialog (another answer has suggested doing it that way) isn't that good, as you will not be able to make cool fading transitions and you wont be able to make it close with a button or link.
注意：仅对对话框使用 CSS（另一个答案建议这样做）并不是那么好，因为您将无法进行酷炫的淡入淡出过渡，并且您将无法使用按钮或链接将其关闭。
I hope this is helpful.
我希望这是有帮助的。
回答by JFakult
Glinkot. If you look at the web pages source code it gives you a div like this:
格林科特。如果您查看网页源代码，它会为您提供一个如下所示的 div：
<div id="seeThru" style="opacity: .75; height: 100%; width: 100%"></div>
from there you can just overlay anchors or whatever else
从那里你可以只覆盖锚点或其他任何东西
回答by Scott
yeah, it kind of looks like a jquery ui dialog plugin. I've actually been looking into creating something similar and it's my understanding that those ui dialogs are pretty customizable. Here's a basic tutorial I found on youtube http://www.youtube.com/watch?v=b16V25eNyJY. Hope this helps.
是的，它有点像 jquery ui 对话框插件。我实际上一直在研究创建类似的东西，我的理解是那些 ui 对话框是非常可定制的。这是我在 youtube http://www.youtube.com/watch?v=b16V25eNyJY上找到的基本教程。希望这可以帮助。
