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...

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?


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

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

I recommend FancyBox:

But also check out 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.