Why is window.showModalDialog deprecated?
From http://tjvantoll.com/2012/05/02/showmodaldialog-what-it-is-and-why-you-should-never-use-it/,
In general the idea of putting a native dialog implementation into the
browser was a really good idea, butwindow.showModalDialog
was a bad
implementation that is riddled with issues and poor browser support. (…)Note that (…) [a modal dialog using
showModalDialog
] is a full HTML
document, not a snippet that is injected in. This is a characterizing
feature ofwindow.showModalDialog
. It’s really just two completely
separate windows communicating with each other. The fact that you have
two separate windows and DOMs means you don’t have to worry about JS &
DOM conflicts, which is appealing if you have a lot of bad JavaScript
with a cluttered global scope. But mostly this just adds unnecessary
complexity, complicates the browser implementation, and contributes to
a number of bugs. (…)While it’s important that modal dialogs prevent the user from
interacting with the originating window, there’s no reason the user
shouldn’t be allowed to interact with other tabs or native browser
controls (back/forward, favorites, address bar, etc). (…) This is
actually a big annoyance to the end user. (…)The debugging experience for
window.showModalDialog
is horrible.
(…) You’re basically forced to alert like it’s 1999 to determine
what’s going on. (…)Currently no major mobile browsers support
window.showModalDialog
,
so if you’re looking for any sort of tablet / mobile support you need
to stay away.
What to use instead?
HTML5 introduces the new <dialog>
element, which can be used to display dialogs, including modal ones.
For example:
<dialog id="myDialog">
Foo bar
<button id="hide">Close</button>
</dialog>
<button id="show">Show Dialog</button>
var dialog = document.getElementById('myDialog');
document.getElementById('show').onclick = function() { dialog.showModal(); };
document.getElementById('hide').onclick = function() { dialog.close(); };
The problems are: