How To Use Modal Browser Windows With Internet Explorer (221590)

MORE INFORMATION

The following code examples show how to launch a child window to prompt for a value and then return that value to the parent window.

Save the following page to your desktop as Modal1.htm:

<html>
<head><title>Demo modal dialog</title></head>
<script language="JavaScript">
function changeMe(szName)
{
	var szUrl;
	var szFeatures;

	szUrl = 'modal2.htm';
	szFeatures = 'dialogWidth:20; dialogHeight:10; status:0; help:0';

	szName = window.showModalDialog(szUrl, szName, szFeatures)
	Name.innerText = szName;
}
</script>
<body>
<p>Hello, your name is <b><span id="Name">Unknown</span></b>.</p>
<p><input type="button" onClick="changeMe(Name.innerText)" value="Change Name"></p>
</body>
</html>

Next, save the following page to your desktop as Modal2.htm:

<html>
<head><title>Enter your name</title></head>
<script language="JavaScript" for="window" event="onLoad">
	Name.value = window.dialogArguments;
</script>
<script language="JavaScript">
function closeMe()
{
	window.returnValue = Name.value;
	event.returnValue = false;
	window.close();
}
</script>
<body>
<p><input type="text" name="Name" value=""></p>
<p><input type="button" value="Submit" onClick="closeMe()"></p>
</body>
</html>

Now browse the file named Modal1.htm:
1. The page is displayed showing "Unknown" for a user name.
2. Click the "Change Name" button.
3. The changeMe() function is called and the current name is passed to the child window in Window.dialogArguments.
4. Enter a name in the text box in the child window and click the "Submit" button.
5. The closeMe() function of the child window is called. This returns the new value in Window.returnValue and closes the child.
6. The parent page retrieves the return value and displays it dynamically.

For more information on Microsoft's scripting technologies, please see the following web site:

http://msdn.microsoft.com/scripting/

How To Use Modal Browser Windows With Internet Explorer (221590)

SUMMARY

MORE INFORMATION