window.showModalDialog polyfill using a <dialog> element
This is a
window.showModalDialog()shim using a modal HTML5 element and ECMAScript 2015 Generators or ECMAScript 2017 Async/Await. It was tested in the latest Google Chrome 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
showModalDialogfunction:
Passing both
window.dialogArgumentsand
window.returnValueis supported, provided that the dialog document is on the same server as the host document.
ShowModalDialog Polyfill is using Promises, Generators,
yield,
async,
awaitand the
spawnfunction by Jake Archibald. If they are unavailable, the polyfill is using
evaland JSON as a fallback, provided that statements are separated by new lines, the
showModalDialogfunction is not nested and runs only once in a function.
spawn(function*() {//statements before showing a modal dialog var returnValue = yield window.showModalDialog( url [, arguments, options] ); //statements after closing a modal dialog
});
or:
(async function() {//statements before showing a modal dialog var returnValue = await 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:
dialogHeight:???px;dialogLeft:???px;dialogTop:???px;dialogWidth:???px;
When using generators or async/await, both
showModalDialogand
spawnfunctions are Promises, so you can use their
thenmethod and
yieldthem.
When using an
evalfallback, the
showModalDialogfunction 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.
Here is a live demo. Works best in Google Chrome.
ShowModalDialog Polyfill is developed by Jerzy Głowacki under Apache 2.0 License.