As someone who has had to write a lot of IE-only code (against my will, I swear!), I was pleased to hear that Firefox 3.0 added support for the IE JavaScript function window.showModalDialog. Being in the middle of re-writing an IE-only web application, I thought this would simplify rewriting the modal dialogs to be compatible with both browsers.

Unfortunately, I don't think the folks at Mozilla put their best effort into this one.

First of all, the Firefox implementation only supports a subset of the IE options. Here's a table showing what each browsers implementation supports according to their documentation:

Documented Support
Option Internet Explorer Firefox
dialogWidth Yes Yes
dialogHeight Yes Yes
dialogLeft Yes Yes
dialogTop Yes Yes
center Yes Yes
dialogHide Yes No
edge Yes No
resizable Yes Yes
scroll Yes Yes
status Yes No
unadorned Yes No

Doesn't seem too bad, right? We still have center, resizable and scroll right? Right? Wrong.

Documentation != Implementation

It seems the guys who wrote the Firefox documentation weren't the same guys who wrote the code. Including center, resizable or scroll in your arguments string has no effect whatsoever. In fact, center is supposed to be on by default, but I can tell you right now that the modal dialog sure as hell isn't centered.

Here's an updated support matrix:

Actual Support
Option Internet Explorer Firefox
dialogWidth Yes Yes
dialogHeight Yes Yes
dialogLeft Yes Yes
dialogTop Yes Yes
center Yes No
dialogHide Yes No
edge Yes No
resizable Yes No
scroll Yes No
status Yes No
unadorned Yes No

Fortunately, they did get one part right: the dialog is modal. Woooo!

Can we fix it?

Well, we can, kinda. We can't fix resizable, because that's a property of the window, and we can't fix scroll for the same reason. We can, however, emulate the center option by using dialogLeft and dialogTop. Here's some quick-and-dirty code I wrote to do that.

var oldShowModalDialog = window.showModalDialog;
window.showModalDialog = function(url, args, options)
{           
  // Convert the options string into an object.
  var pairs = options.replace(/\s+/g, "").split(";");
  var option = {};
  $.each(pairs, function()
  {
    var pair = this.split(":");
    if (pair.length != 2) return true;
            
    option[pair[0]] = pair[1];
  });
      
  // Get the width and height of the document.
  var width = $(document).width();
  var height = $(document).height();
      
  // Get the width and height of the dialog.
  var dialogWidth = option.dialogWidth.replace("px", ""); 
  var dialogHeight = option.dialogHeight.replace("px", "");
      
  // Calculate where the dialog needs to be to be
  // centered.
  var dialogLeft = (width - dialogWidth) / 2;
  var dialogTop = (height - dialogHeight) / 2;
      
  // Add those settings to the options string.
  options += "dialogLeft: " + dialogLeft + "; ";
  options += "dialogTop: " + dialogTop + "; ";
      
  // Call the original function.
  return oldShowModalDialog(url, args, options);
};

Although this code uses jQuery, you could easily rewrite it to use vanilla JavaScript.

Will it be fixed soon?

Firefox has had showModalDialog since 3.0. So naturally, you'd have assumed they'd have fixed this bug in 3.5, right? Nope! The bug still exists in 3.5. Thus, I wouldn't hold my breath on this one being fixed anytime soon.