window.showModalDialog behaves differently on IE, FireFox and on Chrome

I would like to share one small “feature” I have found on current latest browsers. By “latest browsers” I mean (I tested this behavior on IE 11, FireFox 29 and Chrome 37).

The problem:
If say for whatever reason you are using JavaScript modal dialogs with

window.showModalDialog()

like in older web app (chrome and firefox displays waring you should use

window.open()

instead, more on this here : http://stackoverflow.com/questions/20733962/why-is-window-showmodaldialog-deprecated-what-to-use-instead ) and you are passing in multiple same arguments (for whatever reason, maybe you had default values + new values as params and previously IE took second parameter, that is the mystery of legacy code and I don’t suppose majority of you will do this, but it might happen), than you will have problem on FireFox.

So given JavaScript call like this

window.showModalDialog('HtmlPage1.html', null, 'resizable:0;status:0;dialogwidth:900px;dialogheight:200px;dialogwidth:100px;dialogheight:300px');

the following will happen :

no Error will be thrown, IE and Chrome will use second pair of dialogwidth and dialogheight, FireFox will use first one and all of these popups will be styled using these values so the same code will result in different UX.

Small side note though, Chrome will make dialog really 100px and IE will hit some internal min value I suppose and Chrome’s window will not be modal (you can click away) but  everywhere the window will be opened.

Hope this might save you some time in case you run into the same problem.

Leave a Reply

Your email address will not be published. Required fields are marked *