Dim out background page

[Cineno]

I really like the way the login form works for SurveyMonkey.com and would like to do something similar with dimming out the background page. (You can see it by clicking "Member login" on surveymonkey.com)

I was told it's done with CSS and Javascript. I've looked around and couldn't see any example scripts of this, do you guys know of any?


Thanks for any help!

 

[southbeach]

This is done by
1) Create a div (1) set to cover entire page
2) Create a div (2) set with log in content or form
3) Make sure that div (1) has z-index lower than (2)
4) By default, both div (1) & (2) are set to not show or with display property set to none
5) Change the display properties to '' or 'block' to trigger bring the div (1) and (2) to the front

here is a sample css for a div to cover the background

.blockScreen {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 20;
	display: none;
	background-color: #CCC;
	filter: alpha(opacity = 55);
	opacity:.55;
}

and the html code will be something like

<div id="blockScreen" class="blockScreen">&nbsp;</div>

Hope this points you in the right direction!


--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

 

[Cineno]

This definiately points me in the right direction. I'll play around with it and see how it goes.

Thanks for the help!

 

[Ascalonian]

There is a JavaScript library called Dojo that has something called Dialog

This provides the modal box you are looking for. And Dojo is stored on a CDN, so you don't have to download it )