Honestly, I don't know a better name for this technique than a page gray-out with a dialogue box pop-up (if this actually has a name, or you know a better one, please do inform me). What I'm talking about here is a technique that instantly grays-out the entire web site when you click a link, so that all your attention shifts to the pop-up that is loaded. The technique is used quite often by Web 2.0 enabled websites, so I bet that you have already seen something like it and probably thought that it was pretty cool.. That was exactly what I thought, so I tried it out and came up with a simplesolution which I want to share with you all.
Some neat things about this solution:
- Enter/Return key is enabled, so you don't have to (mouse) click the Add button.
- You can press the ESCAPE button, which will close the dialogue box. If the new value field is not empty, the script will first ask for confirmation.
- 'Focus' shifts to the pop-up (so the user can start typing right away).
- The gray overlay always fills out the entire page, even if the resize the page later on.
- The script is both MSIE and Firefox compatible (tested in MSIE7 and Firefox 2.0, should work in older versions as well, perhaps not IE4/IE5).
Please note: this script uses the Prototype and Scriptaculous libraries, which are available for free on the respective websites.
How it is done
- position: absolute;
- left: 0px; top: 0px;
- width: 100%; height: 100%;
- background-color: #666666; /* dark gray */
- opacity: .7; filter: alpha(opacity=70); /* opacity: partly transparent */
- z-index: 1000;
The dialogue pop-up is positioned above the gray overlay, so that it is accessible and visible to the user. After the dialogue box is either submitted or closed (using the close link, or the escape button) the gray overlay and dialogue box are hidden again.