How do they do this semi-transparent overlay effect in javascript/jquery? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

This question does not appear to be about a specific programming problem, a software algorithm, or software tools primarily used by programmers. If you believe the question wo开发者_JS百科uld be on-topic on another Stack Exchange site, you can leave a comment to explain where the question may be able to be answered.

Closed 9 years ago.

Improve this question

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.

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.

Does anyone know how this is done or how to do something similar on a page?

---

Steve used: http://trentrichardson.com/Impromptu/ for the message boxes on the tutorial pages.

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/

---

Have a quick look at the example below:

http://jsfiddle.net/2q7xT/

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:

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

I used the RGBA technique but it's not supported by all browsers.

The second solution is to fill the div with a black color such as:

background-color: #000;

and then use the Cross-browser opacity css attribute to reduce the opacity:

/* 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-index lower than the z-index of the element above it.

---

That's called a lightbox, or, a modal box. There are several cool jQuery lightbox plugins. Here are a few:

1. FancyBox

2. ColorBox

3. LightView

I suggest FancyBox or ColorBox for what you're trying to do. FancyBox is my favorite.

Here are the top 10 jQuery modalbox plugins: Top 10 jQuery Modal Box Plugins

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.

I hope this is helpful.

---

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.

---

Glinkot. If you look at the web pages source code it gives you a div like this:

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

from there you can just overlay anchors or whatever else