12

What are situation when you want to use window.showModalDialog function? It seams that you can do exactly the same with window.open function and few parameters that remove some of the chrome (navigation, addressbar, etc...)

When would you want to use window.showModalDialog and window.open?

dev.e.loper
  • 35,446
  • 76
  • 161
  • 247

6 Answers6

19

It has been a few years since this question was originally asked and things have changed a bit since then. window.showModalDialog is now officially standardized as part of HTML5 and is supported in IE, Firefox 3+, Chrome (albeit buggy), and Safari 5.1+.

Unfortunately window.showModalDialog is still plagued by a number of issues.

  • Modal dialogs are blocked as popups by default in Firefox, Chrome, and Safari.
  • The modal dialogs in Chrome are buggy and aren't truly modal - see http://code.google.com/p/chromium/issues/detail?id=16045 & http://code.google.com/p/chromium/issues/detail?id=42939.
  • All browsers except Chrome block the user from interacting with the entire window (favorites, browser controls, other tabs, etc...) when a modal dialog is up.
  • They're a pain to debug because they halt JavaScript execution in the parent window while waiting for the modal dialog to complete.
  • No mobile browsers support window.showModalDialog.

Therefore it's still not a good idea to use window.showModalDialog. If you need the window opened to be modal (i.e. the user cannot interact with the rest of the page until they deal with the dialog) I would suggest using jQuery UI's dialog plugin.

window.open will work for non modal windows but I would stick with jQuery UI's dialog because opening new windows tends to annoy users.

If you're interested I write about this in more detail on my blog - http://tjvantoll.com/2012/05/02/showmodaldialog-what-it-is-and-why-you-should-never-use-it/.

TJ VanToll
  • 12,584
  • 4
  • 43
  • 45
10

Modal dialogs are dialogs that once opened by the parent, do not allow you to focus on the parent until the dialog is closed.

One could use a modal dialog for a login form, edit form, etc where you want to have a popup for user interaction but not allow the user to return to the window that opened the popup.

As a side note, I believe only Internet Explorer implementes window.showModalDialog, so that kind of limits your usage of it.

Samuel
  • 37,778
  • 11
  • 85
  • 87
  • FF3 finally has it. Chrome does too but I don't think it's truly modal there (can click behind it). – Crescent Fresh Apr 08 '09 at 01:54
  • a parameter to window.open can make it modal – geowa4 Apr 08 '09 at 02:22
  • 1
    According to https://developer.mozilla.org/en/window.open: modal: Starting with Mozilla 1.2.1, this feature requires the UniversalBrowserWrite privilege. Without this privilege, it is ignored. – Grant Wagner Apr 08 '09 at 16:21
  • Firefox 3 note: The MSIE 6 equivalent to this feature is the showModalDialog() method. For compatibility reasons, it is now also supported in Firefox 3. – Grant Wagner Apr 08 '09 at 16:22
  • 1
    And now it seems like Chrome has removed the support of it since it is deprecated. Version 37.x.x.x of chrome. – Tomas Jansson Sep 01 '14 at 09:50
4

showModalDialog() is currently being standardized as part of HTML5. The third argument (for additional options) is not present in the HTML5 version, and is (safely) ignored by Safari and Chrome.

http://dev.w3.org/html5/spec//user-prompts.html#dialogs-implemented-using-separate-documents

antyrat
  • 27,479
  • 9
  • 75
  • 76
Neel
  • 41
  • 1
3

Note that there's a bug in Chrome 2 which prevents showModalDialog() from loading properly. The popup window appears, but the content never loads.

One more reason to avoid using showModalDialog().

Jonathan Lidbeck
  • 1,555
  • 1
  • 14
  • 15
0

showModalDialog()works well in Internet Explorer, Firefox (3 and above) Works in Chrome but popup is not model (you can go to parent window)

antyrat
  • 27,479
  • 9
  • 75
  • 76
Neel
  • 41
  • 1
0

Note that while you can show modal from any popup window, you cannot use window.open from a model dialog in some browsers (IE, Safari).

ronapelbaum
  • 1,617
  • 14
  • 19