dannyg.com logoSearch
 
Simulated Modal Window Fix for IE5+ and NN6+
Updating a Favorite

The cross-browser modal dialog box window described in my DevEdge View Source article needs minor modifications to operate smoothly in Microsoft Internet Explorer 5 or later under Windows and in Netscape Navigator 6 or later. The only modification is to the file named main.html. The end of the modal dialog code in the original article ends like this:

// Invoked by onFocus event handler of EVERY frame,
// return focus to dialog window if it's open.
function checkModal() {
   if (dialogWin.win && !dialogWin.win.closed) {
      dialogWin.win.focus()
   }
}

/**************************
END MODAL DIALOG CODE
**************************/

The root of the problem in IE5+ is the typical timing issues that trip up IE/Windows very frequently when multiple windows (including alerts) are involved. The fix is simple, however. Replace that last checkModal() function with the following (IE5 code in red; latest additions for IE5.5 and NN6 code in blue):

function checkModal() {
   setTimeout("finishChecking()", 50)
   return true
}

function finishChecking() {

   if (dialogWin.win && !dialogWin.win.closed) {
      dialogWin.win.focus()
   }
}

The IE5.5 and NN6 fix also requires the addition of a return statement as part of the onFocus event handler in the BODY (thanks to R.William Woodruff for this clue):

...onFocus="return checkModal()"

The most recent update (28AUG2002) is for browsers based on Mozilla 1.0, which exposes (for signed scripts only) a window object method called openDialog(). This is a function name I've been using since Day One, but since it conflicts with the Mozilla method, it causes security-related script errors. The latest update renames the function to openDGDialog() (located in the main.html file).

You can try it out here (click on the "Preferences" link to display the dialog window), but read the article for implementation details.

As to why I don't use showModalDialog() for IE, bear in mind that the method (which works excellently in IE) has an unsimulatable technique for passing data to the modal window and getting it back. My design, although a bit cumbersome to work around IE event and timing faults, provides a single scriptable interface for all supported browser platforms.

Note: If you open a simulated dialog window from a frame within a frameset, you must implement the code to lock/unlock events for each of the frames in the frameset. Wrap the code inside a for loop that operates on each member of the parent.frames array.

If you've landed at this page in search of IE showModalDialog() problems, the answer may be here (even though it's not related to the pseudo-modal window technique shown here). Reader Steinar Overbeck Cook from Norway has been kind enough to share his ingenious solutions to some inherent problems in the IE showModalDialog() window with respect to form submission and cookies. These pseudo-windows don't obey all of the rules that regular windows do. Therefore, if you submit a form from a dialog window, the page returned from a server opens a new browser window -- unless you use Steinar's technique. The other problem is that cookies from the main window do not carry over to the dialog window, even when both windows originate from the same domain and server. Once again, Steinar has the solution. Read the details in his JavaScript modalWindow.js library. And many thanks to Steinar for his excellent detective work!


Google
Search dannyg.com*   Search WWW
*Search results are displayed on a google.com page, but links from search results bring you back to this site.
To Top of Page
Entire contents Copyright © 1996-2004 Danny Goodman. All Rights Reserved.

Valid XHTML 1.0!