How do I Google Plus and Facebook Demo opacity Javascript?

Recently Google+ and Facebook have added a nice feature that when a user first logs in and there are new features available it displays it as a demo mode of some sort highlighting the element in question and darkening or changing opacity on the rest of the screen as a means to focus on开发者_开发百科 that element. It also shows step by step tooltips for the demo.

Does anybody know of an open source script or jquery plugin that does this already?

They basically block the UI and show an overlay on top of the whole page. You can try jQuery blockUI plugin it will help you block the page and then you can show an overlay on top of it.

http://plugins.jquery.com/project/blockUI

I don't know of one, so I made one: http://jsfiddle.net/minitech/A9AAa/

It's pretty simple, call spotlightOn and pass the element on which the "spotlight" should "shine" as an argument. Call spotlightOff to turn the spotlight off.

It should degrade gracefully.