Knowledge Base Articles » KB100203: Modal Dialog Box for MS Internet Explorer 4+ and Netscape 4+.

If you have an application that requires a separate pop up window and you want the user to address the contents of that window before returning to the main (parent) window, then a modal dialog box may be an appropriate solution.

If the browser is Internet Explorer 4 or higher, you can use the window.showModalDialog() function to achieve the desired effect.  If the browser is Netscape 4 or higher, we must fake modality by capturing the onfocus event of the parent window and forcing it to immediately return the focus to the child.  We must also capture and ignore all mouse-click events in the parent window, for as long as the child window is open.

Click here to see an example of a cross-browser modal dialog box.
 
If you tested the link above and you are using Internet Explorer, you will notice that, unfortunately, when using showModalDialog, the mouse pointer does not return to the correct arrow type after the child window is cleared. Hopefully, Microsoft will fix this at some point in the near future. Until then, the pointer will have an hourglass next to it, as if waiting on an operation. You can still click on the page as if it were a normal cursor.

To implement a modal dialog box, place the following javascript between the head tags of your document. The function ShowWindow() specifies the new window size and the document to open, and should be called when you wish to open the dialog box.  The HandleFocus() function is called whenever the page received the focus, and immediately returns the focus to the child window if it is open.  The IgnoreEvents() function is set up as the event handler for CLICK events for the lifetime of the child window.  It ensures that all mouse-clicks in the parent window are ignored.

<script>
 var winModalWindow
 
function IgnoreEvents(e)
{
  return false
}
 
function ShowWindow()
{
  if (window.showModalDialog)
  {
    window.showModalDialog("ModalChild.htm",null,
    "dialogWidth=200px;dialogHeight=100px")
  }
  else
  {
    window.top.captureEvents (Event.CLICK|Event.FOCUS)
    window.top.onclick=IgnoreEvents
    window.top.onfocus=HandleFocus 
    winModalWindow = 
    window.open ("ModalChild.htm","ModalChild",
       "dependent=yes,width=200,height=100")
    winModalWindow.focus()
  }
}

 
function HandleFocus()
{
  if (winModalWindow)
  {
    if (!winModalWindow.closed)
    {
      winModalWindow.focus()
    }
    else
    {
      window.top.releaseEvents (Event.CLICK|Event.FOCUS)
      window.top.onclick = ""
    }
  }
  return false
}
</script>

Finally, you open the subwindow by calling the ShowWindow function.  This can be done from a link tag as follows:

<a href="javascript:ShowWindow()">

You can view the documentation for the window.showModalDialog() method at the Microsoft Web Workshop.
 
The window.open() method is documented in the ECMAScript quick-reference guide on this site. When calling this method be sure to make the child window "dependent" so that if the user closes the parent window, the child will also close. Also, remember not to put any spaces in your features argument when calling the window.open() method - Netscape will not parse it correctly if you do.
 
To adopt the above code for use in your own pages you should modify the calls to window.open() and window.showModalDialog(). Change the file name to the desired URL and modify the width/height of the window that pops up to an appropriate size for your content.