Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is window.showModalDialog deprecated? What to use instead?

I was developing a GreaseMonkey script which used window.showModalDialog.

But before finishing it, I have discovered that Firefox 29 warns:

Use of window.showModalDialog() is deprecated. Use window.open() instead. For more help https://developer.mozilla.org/en-US/docs/Web/API/Window.open

But the problem is that window.open needs UniversalBrowserWrite privilege in order to open a modal window using window.open.

Then, why is window.showModalDialog deprecated? Is there any API which doesn't require privileges?

Note: I don't want a fake modal dialog (like jQuery's one), I need a real modal which pauses JavaScript execution.

like image 202
Oriol Avatar asked Dec 22 '13 20:12

Oriol


People also ask

What can I use instead of showModalDialog?

You can use my showModalDialog polyfill using the brand new modal <dialog> element, which works in the latest Google Chrome. A <dialog> polyfill for older browsers is here.

Why is showModalDialog deprecated?

showModalDialog() is depreciated precisely because it pauses javascript execution. Pausing javascript execution is difficult to implement securely, and in a way the gives a responsive browser. This is similar to why synchronous XMLHttpRequest is also being depreciated.

How do I get a return value from a Windows Open?

Typically the onclick event on the "Yes" or "Ok" button in the modal dialog looks like this: window. returnValue = true; window. close();

How do you open a pop up window with modal?

My code to open a pop up: window. open("https://www.picpixa.com/wp-content/plugins/create-own-object/plugin-google-drive/index.php", "socialPopupWindow", "location=no,width=600,height=600,scrollbars=yes,top=100,left=700,resizable = no");


2 Answers

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, but window.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 of window.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();      }; 

Demo

The problems are:

  • Browser support is currently negligible, but there is a polyfill.
  • It doesn't pause JS execution.
like image 131
Oriol Avatar answered Sep 28 '22 00:09

Oriol


You can use my showModalDialog polyfill using <dialog> tag if you want to still use this solution.

like image 38
niutech Avatar answered Sep 28 '22 01:09

niutech