CODEWITHSUNDEEP
javascripteffects
Ryan
Ryan

Reputation: 10049

Javascript: Dimming effect on webpage

Can someone tell me what that "dimming effect" is called when you visit a webpage and the whole page gets "dimmed" or "blurred" and there is an image or form in the middle of the screen? To see the rest of the webpage you have to close the image or form in the middle of the screen.

Is there some software which is used to set that up or something?

All I know is it's a dimming effect that uses JS because I have seen it on some image galleries but now I am seeing it more and more on webpages (for example when they ask you to login and show that effect along with the login form).

Any help in the form of links, code or recommendations would really be appreciated.

Thanks!

Upvotes: 2

Views: 1286

Answers (4)

Last Rose Studios
Last Rose Studios

Reputation: 2481

The effect is called a modal dialog. It is created by adding a semi-transparent <div> to cover the page (with e.g. these CSS rules: background:black and opacity:50%) and then creating another <div> with the content you want above it.

Upvotes: 3

Travis J
Travis J

Reputation: 82287

There are tons of ways to do this. You can use a lightbox, some jQuery, or roll your own. I usually roll my own because I like to infuse a lot of dynamic stuff in there that I just don't seem to get from libraries.

The method I use is to dark out the whole page (jQuery's fade, or an image overlay, or similar) and then on a different z-index I will have a div display above the darked out page. Then populate/position the div with what suits you.

Upvotes: 1

Dominic Green
Dominic Green

Reputation: 10258

There is a couple of names lightbox is the main name for it or some call it an overlay.

There is quite a good plug in for query http://leandrovieira.com/projects/jquery/lightbox/

Upvotes: 1

pimvdb
pimvdb

Reputation: 154848

It's called a lightbox; there are tons of libraries to place one on your page.

A number of them are plugins based on more abstract libraries such as jQuery, due to the ease of use to implement effects and animations (like this plugin).

Upvotes: 1

Related Questions