Need help with showModalDialog?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

niutech
154 Stars 90 Forks Apache License 2.0 30 Commits 16 Opened issues

Description

window.showModalDialog polyfill using a <dialog> element

Services available

!
?

Need anything else?

Contributors list

# 54,627
iframe
web-com...
PHP
swift-f...
15 commits
# 528,352
JavaScr...
HTML
2 commits
# 73,575
single-...
Telegra...
messeng...
html5
2 commits
# 78,817
Django
subproc...
rsync
time-ma...
1 commit

ShowModalDialog Polyfill

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
showModalDialog
function:

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,

yield
,
async
,
await
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.

Please note that native

showModalDialog
support is considered deprecated and it was removed from Chrome 43 and Firefox 56.

Syntax

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:

  • 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 or async/await, 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
eval
s 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.

License

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.