Removal of the showModalDialog API

Question

With the impending removal of the showModalDialog API from various browsers, our company like many others who provide large scale enterprise web applica

Answer 1

In jQuery's 1.11.4 version, there is a built-in

you can use, which also allows for capturing a callback parameter on close.

    $("#dialog").dialog({
        autoOpen: false,
        width: 500,
        height: 500,
        modal: true
        buttons: [
            {
                text: "Ok",
                click: function () {
                    $(this).dialog("close");
                }
            },
            {
                text: "Cancel",
                click: function () {
                    $(this).dialog("close");
                }
            }
        ]
    });

Your value could be captured in the callback functions from the button click events.

You could even add HTML to append your own 'x' button to the existing "Close" button and hide the original, so you could do whatever you wanted:

    $(document).ready(function () {
        var closeHtml = '×';
        $("button[title='Close']").css('display', 'none').parent().append(closeHtml);

    });

then attach a click event to the dialog-close ID from the 'x' button:

    var url = 'https://www.cnn.com';

    // Link to open the dialog
    $("#dialog-link").click(function (event) {
        var dialog = $("#dialog");
        dialog.dialog("open");

        dialog.html('');

        $("#dialog-close").on('click', function (e) {
            // ...do whatever you want here, then...
            $("button[title='Close']").click();
            //e.preventDefault();
            //dialog.close();
        });

        event.preventDefault();
    });

Only caveat, since this uses IFrame, it might not work if the security on the site prevents bringing in external sites to your own site, if you are using it in this way. Google, for example, prevents this use with their site.

This should be a cross-platform example - I've tested it in IE 11. "Polyfill", that I've seen others say is another way to do this, is NOT, and does NOT work in IE because it relies on Promise, which is not supported in IE, as it shows at the bottom of this page: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise