Friday, April 3, 2009

How To Use Modal Browser Windows With Internet Explorer

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:
    <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;
    <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>
  2. Next, save the following page to your desktop as Modal2.htm:
    <head><title>Enter your name</title></head>
    <script language="JavaScript" for="window" event="onLoad">
    Name.value = window.dialogArguments;
    <script language="JavaScript">
    function closeMe()
    window.returnValue = Name.value;
    event.returnValue = false;
    <p><input type="text" name="Name" value=""></p>
    <p><input type="button" value="Submit" onClick="closeMe()"></p>
  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
For more information on Microsoft's scripting technologies, please see the
following web site:

No comments: