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

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?

Answer 1

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/

Answer 2

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.

Answer 3

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.