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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
pollock_dCommented:
Oh, and I see their menu on the right, not the left...
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

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
b0lsc0ttIT 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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
b0lsc0ttIT 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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.