How Microsoft Does it

Does Anyone know how Microsoft does their home page thingy where when you click on a link from their left menu, it greys out everything in the background and plops this window in front of all of it.
LVL 17
nplibAsked:
Who is Participating?
 
b0lsc0ttConnect With a Mentor IT ManagerCommented:
nplib,

Is it really a new window or just looks like it?

It is common to do it with elements but use layers and other CSS to make it seem 3 dimensional and appear to "popup."  Lightbox and some other Javascript extensions/frameworks offer this type of feature and can provide it with some neat effects, etc.  A simple example is in the HTML snippet below.  It is basic and not as feature rich as other methods but shows the idea behind the technique.

Let me know if you have any questions or need more information.

b0lsc0tt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
<link href="../style.css" rel="stylesheet" type="text/css" />
<title>The page</title>
<style type="text/css">
div {
	margin: 10px auto;
}
#links {
	color: red;
}
</style>
<script type="text/javascript">
function doForm() {
	document.getElementById('formDiv').style.zIndex = "100";
	document.getElementById('formDiv').style.display = "";
	document.getElementById('body').style.backgroundColor = "#303030";
	document.getElementById('button1').style.visibility = "hidden";
}
function clearForm(frm) {
	frm.title1.value = '';
	frm.protocol.options[0].selected = true;
	frm.link1.value = '';
	frm.desc1.value = '';
}
function quitForm(frm) {
	document.getElementById('formDiv').style.zIndex = "-1";
	document.getElementById('formDiv').style.display = "none";
	document.getElementById('body').style.backgroundColor = "white";
	document.getElementById('button1').style.visibility = "visible";
	clearForm(frm);
}
</script>
</head> 
<body id="body" style="margin: 25px 115px;">
<h3>My page</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
<div id="links"></div>
<br /><br />
<div style="width: 25%; margin: 0 auto;">
<button id="button1" onclick="doForm();">Show Form</button>
</div>
<div id="formDiv" style="width: 60%; margin: 0 auto; padding: 10px; background-color: #ccff99; text-align: center; z-index: -1; position: absolute; top: 50px; left: 150px; border: solid 1px gray; font-weight: bold; display: none;"> <h3>AJAX Javascript Popup Form</h3>
<form name="form1" action="" method="post">
Title: <input type="text" name="title1" size="65" /><br /><br />
Protocol: 
<select name="protocol">
<option value="http://">http://</option>
<option value="https://">https://</option>
<option value="ftp://">ftp://</option>
</select>
Link: <input type="text" name="link1" size="45" /><br /><br />
Description: <input type="text" name="desc1" size="55" /><br /><br /><br />
<input type="button" name="reset" value="Quit" onclick="quitForm(this.form);" />
</form>
<br /><br />
</div>
<br /><br />
<br /><br /> 
</body>
</html>

Open in new window

0
 
pollock_dCommented:
probably using ajax tool kit, modal popup extender...

http://asp.net/AJAX/AjaxControlToolkit/Samples/ModalPopup/ModalPopup.aspx
0
 
zkeownCommented:
It's called a modal popup, and it's a control extender in the ASP.NET AJAX Control Toolkit.

There are non-microsoft ways to do it that involve a pile of javascript, but that is probably easiest.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
pollock_dCommented:
Oh, and I see their menu on the right, not the left...
0
 
pwrBallCommented:
You mean the right menu

They are probably using a ModalPopupExtender from the AJAX control toolkit.

http://ajax.asp.net
0
 
nplibAuthor Commented:
oops, I meant right.
0
 
nplibAuthor Commented:
zkeown:
do you know where I can find this non-Microsoft way of doing it?
0
 
b0lsc0ttConnect With a Mentor IT ManagerCommented:
nplib,

Some examples using the Lightbox method I described can be found at http://particletree.com/features/lightbox-gone-wild/ .

Let me know if you have a question.

b0lsc0tt
0
 
nplibAuthor Commented:
Haven't Decided which one I will use but they both do exactly what I want.
0
 
b0lsc0ttIT ManagerCommented:
I'm glad I could help.  Thanks for the grade, the points and the fun question.

bol
0
All Courses

From novice to tech pro — start learning today.