How to display image as an overlay while blurring the main browser window?

I'm looking for an example that shows how to display an image as an overlay in a browser while blurring/greying out the contents from the main browser window, here's an example...

http://fstopgear.com/product/satori-exp/view

Just click on any backpack image, then click any part of the browser to close the image..that's pretty much the functionality I'm looking for, I'm assuming there's a script or package that provides such control?

Answers


There are lot of solutions to get this done in jQuery. Please have a look into the following url's:

http://leandrovieira.com/projects/jquery/lightbox/

http://jquery.com/demo/thickbox/

http://fancyapps.com/fancybox/#examples


There are plenty of solutions as jQuery plugins for this. What you want is called "modal" or "overlay" window.

I recommend FancyBox: http://fancybox.net/

But also check out ColorBox: http://www.jacklmoore.com/colorbox


Need Your Help

Combining and extending Ractive components

javascript ractivejs

I am starting to use Ractive and I would like to understand better how to make reusable components. It is quite easy to write a generic widget that can be used in different situations. My problem i...

PHP Regex: Match section of string based on part of section

php preg-match

I am trying to extract the age limitations from strings:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.