Advertisement

02.16.2008 at 10:33AM PST, ID: 23168645
[x]
Attachment Details

How to create modal popup window with grayed background?

Asked by rascal in Hypertext Markup Language (HTML), JavaScript, Cascading Style Sheets (CSS)

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!Start Free Trial
[+][-]02.16.2008 at 11:19AM PST, ID: 20911019

View this solution now by starting your 7-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

 

About this solution

Zones: Hypertext Markup Language (HTML), JavaScript, Cascading Style Sheets (CSS)
Sign Up Now!
Solution Provided By: nschafer
Participating Experts: 1
Solution Grade: A
 
 
 
Loading Advertisement...
20080716-EE-VQP-32 / EE_QW_2_20070628