window.showModalDialog polyfill using a <dialog> element
JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Latest commit 9c42bc4 Oct 3, 2017
Permalink
Failed to load latest commit information.
README.md Added Firefox notice Oct 3, 2017
bower.json bower config Apr 28, 2015
demo-modal.html Initial commit Jul 22, 2014
demo.html Enable HTTPS Oct 3, 2017
showModalDialog.js Added a fallback without using generators Aug 19, 2014

README.md

ShowModalDialog Polyfill

This is a window.showModalDialog() shim using a modal HTML5 <dialog> element and ECMAScript 6 Generators. It was tested in the latest Google Chrome with the Enable Experimental JavaScript flag enabled in chrome://flags/#enable-javascript-harmony and in the latest Mozilla Firefox with the dom.dialog_element.enabled preference set to true in about:config. Just include the following HTML code before using showModalDialog function: <script src="showModalDialog.js"></script>.

Passing both window.dialogArguments and window.returnValue is supported, provided that the dialog document is on the same server as the host document.

ShowModalDialog Polyfill is using Promises, Generators, the yield keyword and the spawn function by Jake Archibald. If they are unavailable, the polyfill is using eval and JSON as a fallback, provided that statements are separated by new lines, the showModalDialog function is not nested and runs only once in a function.

Syntax

spawn(function*() {

    //statements before showing a modal dialog

    var returnValue = yield window.showModalDialog( url [, arguments, options] );

    //statements after closing a modal dialog

});

or:

function() {

    //statements before showing a modal dialog

    var returnValue = window.showModalDialog( url [, arguments, options] );

    //statements after closing a modal dialog

});

where:

  • url - a string that specifies the URL of the document to load and display;
  • arguments - a variant that specifies the arguments to use when displaying the document;
  • options - a string that specifies the dialog box style, using CSS or the following semicolon-delimited attributes: dialogHeight:???px;dialogLeft:???px;dialogTop:???px;dialogWidth:???px;

When using generators, both showModalDialog and spawn functions are Promises, so you can use their then method and yield them.

When using an eval fallback, the showModalDialog function throws an exception to stop executing code until the modal is closed, then it evals the remaining code of a caller function.

In order to close the dialog from inside of it, invoke parent.document.getElementsByTagName('dialog')[0].close(); provided that both documents have the same origin.

Demo

Here is a live demo. Works best in Google Chrome 37+. The Enable Experimental JavaScript flag is only required for the yield method to work.

License

ShowModalDialog Polyfill is developed by Jerzy Głowacki under Apache 2.0 License.