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