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

Trying to use egrep to pull only matched hexadecimal chars from a database

bash sed pcre grep

The hex chars are in the form of <9F>. There's lots of data around them, but I am only interested in getting the regex right so I can remove these from a table with sed and then re-import the

Local image caching solution for Android: Square Picasso, Universal Image Loader, Glide, Fresco?

android picasso android-glide universal-image-loader fresco

I am looking for an asynchronous image loading and caching library in Android. I was going to use Picasso, but I found Universal Image Loader is more popular on GitHub. Does anyone know about these...