How to grey out the full browser window and display a form in the center?

Question

Have you come across those websites that grey out the full browser window and show you a notification or ask you to fill in a survey .. etc? This used to happen with myspace, if you mistyped in the email or password the full browser window would grey out (it's transparent though, you still can see the contents of the page through it) and a the login controls would display in the center of the browser window with an error message above them telling you that you mistyped the email or password. Unfortunately they removed this from myspace, I want the same code for a website I'm working on and was trying to avoid reinventing the wheel, do you know of any source to find this code instead of writing the whole thing again? I assume this is mostly CSS, Javascript is only used for showing/hiding, am I right?

Answer 1

If you're thinking of using a JavaScript framework, jQuery has the Block UI plugin. Very easy to use and configure.

Demos here

Answer 2

If you prefer prototype.js, there's Prototype Window Class, doing what you want, see alert dialog sample.

Answer 3

You can also use only CSS and Javascript for this: Create a Modal Dialog Using CSS and Javascript and submodal

Answer 4

These are called 'modal' windows. To avoid reinventing the wheel, use existing libraries like JQuery. Googling 'jquery modal window' brings up lots of results that look like exactly what you want. You could either pick one of these if it does exactly what you want, or find one with good source to deconstruct.

Answer 5

If you are working in asp.net and want a quick and easy tool for this get the ajax toolkit. Then use the modal popup control. Here is the example on the AJAX PAGE