showModalDialog replacement

Ok, so this is not a drop-in replacement for showModalDialog, because it does not block javascript, and does require some code changes.  I wrote it to demonstrate that we don’t really need showModalDialog, we can achieve the use case (prevent interaction with the page while prompting for something else) without needing to block.

Update: Code now available on GitHub: https://github.com/Mehuge/showModalDialog

Here is the code:-

NOTE, due to WordPress crapyness, I can no longer show html source code, use this Github link to see the full source code

function showModalDialog(url, args, options) {
    options = options || {};
    return new Promise(function(fullfil, fail) {
        var cover = $('<'+'div>')
            .addClass('cover')
            .appendTo(document.body);
        var content = $('<'+'div>')
            .addClass('dialog')
            .css({ width : options.width||'50%',
                  height: options.height||'50%',
                  left: options.left||'25%',
                  top: options.top||'25%',
                  display: 'none'
                 })
            .appendTo(document.body);
        var iframe = $('<'+'iframe>').appendTo(content).attr("src", url)
            .on("load", function() {
                content.css({ display: 'block' });
            });
        var close = function () {
            iframe.remove();
            content.remove();
            cover.remove();
        }; 
        showModalDialog.dialogArguments = args;
        showModalDialog.returnValue = function(v) {
            close();
            fullfil(v);
        };
        showModalDialog.cancel = function() {
            close();
            fail();
        };
    });
}

And here is an example usage: (actual source code)

<+script>
showModalDialog('dialog1.html', { arr: [ 'my', 'args' ] }, { width: '50%', height: '50%' }).then(function(returnValue) {
    alert('dialog returned ' + JSON.stringify(returnValue));
    // rest of your code
});
</script>

And the dialog HTML:- (actual source code)

<h1>A sample dialog</h1>
<p>Hello World</p>
<p>This dialog returns 'hello'</p>
<h2>Dialog Arguments</h2>
<+div id="args"></div>
<p></p>
<button onclick="complete('hello')">Close</button>
<+script>
function complete(v) {
    parent.showModalDialog.returnValue(v);
}
args.textContent = JSON.stringify(parent.showModalDialog.dialogArguments);
</script>
Advertisements

About austinfrance

Technical Developer @ RedSky IT / Explorer Software
This entry was posted in Uncategorized. Bookmark the permalink.

4 Responses to showModalDialog replacement

  1. zcorpan says:

    Why do you run $.ajax(url)? Isn’t that unnecessary?

  2. austinfrance says:

    It is completely necessary. It is loading dialog1.html from the server.

    If you mean, why load the html and not just pass it in? Well because thats how window.showModalDialog() works.

    As it would be your own version of showModalDialog though you could extend it, and perhaps assume html source if the url begins with a ‘<' character, or change the first argument to be an object { html: … } and check for typeof string or object in showModalDialog and act accordingly.

    • loloq123 says:

      zcorpan was right all this time!! $.ajax(url) IS unnecessary, inside the Promise code there is the creation of an iframe element, which ends up loading the provided URL

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s