HOWTO: Use Modal Browser Windows With Internet Explorer

ID: Q221590

The information in this article applies to:

SUMMARY

Internet Explorer 4.0 and above provide a rich set of programming features to Web authors through Dynamic HTML (DHTML) scripting. One of the more features allows with DHTML is to launch modal child windows and pass variables between the two windows.


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.

  1. 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>


  2. 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>


  3. 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/

Additional query words: 


Keywords          : 
Version           : WINDOWS:4.0,5
Platform          : WINDOWS 
Issue type        : kbhowto

Last Reviewed: March 31, 1999