I know the title of this question may be a bit confusing, so let me explain in more detail :)

I've been to some websites (like google maps for example) where, upon pressing a button (or on a banking site if your session times out, etc), the page you are viewing will suddenly have a gray-shade applied to it, and a new smaller html window will appear in the middle of the page with a message.

The new smaller window that appears on the page will be the only portion of the page that accepts input, the rest of the page (the 'background' window now) will be 'disabled' and have the gray-shade applied to it, and will not respond to any mouse activity/clicks.

You can see an example of exactly what I am talking about by visiting google maps and using the "get directions" feature. After entering in a starting and ending address and upon viewing the directions, click the "Send" link (it is an envelope icon in the upper right portion of the directions page).

When you press the "Send" link, you will see that google maps pops up the "modal window" and grays out the background and makes the background disabled to any mouse activity/input. It is this effect I am wondering how it is achieved.

I assume it is done with dynamically generated divs and javascript(?) or perhaps a hidden div that is made active via javascript, etc., but that's as far as I can conceptualize it.

thanks experts!