showModalDialog jquery plugin

Question

In my old application we are using showModalDialog , As all of you know the The latest Chrome has removed support for showModalDialog which is a pain. I am looking for a quick fix like jquery plugin. e.g. $window.showModalDialog(dialog, varArgIn, varOptions); ….

Solution 1

You can temporary re-enable showModalDialog support until May of 2015 (see https://stackoverflow.com/a/25663402/961695).

Use that time to update your code. There will be no "quick fix". One thing that showModalDialog did that no plugin will do - it stopped code execution until dialog is closed and dialog result is returned to the caller. You will have to refactor your code to use callback functions instead. Then you can use things like jQuery UI Dialog

Solution 2

This URL is an article somebody wrote in 2011 that supplies a jquery replacement for showModalDialog.

http://extremedev.blogspot.com/2011/03/windowshowmodaldialog-cross-browser-new.html

I am using it on my own projects. The only issue I have (that I recently discovered) is if my parent page is scrollable, I can scroll the parent window down, and get to page elements I'm not supposed to.

Other than that, it works great (ie. for a page that doesn't scroll, I launch the modal dialog, and it masks access to the parent page, and returns a value on close of the modal dialog, and the modal dialog content comes from a URL just like the original showModalDialog function).

Here is the entirety of my version of his code. I added some helper functions and such. Just include the usual jquery stuff, then this, and follow his example for spawning a dialog.

// Based on this article: http://extremedev.blogspot.com/2011/03/windowshowmodaldialog-cross-browser-new.html
/*
Usage example:
var url = 'test.html';

$.showModalDialog({
     url: url,
     height: 500,
     width: 900,
     scrollable: false,
     onClose: function(){ var returnedValue = this.returnValue; }
});

UPDATE August 2012: Looks like there is a problem when setting DocType: HTML 4.01 Doctype on top of extremedevStart.html. --> The popup does not close.
To fix this use:

$dlg.dialogWindow.dialog('close');

instead of:
window.close(); 

*/


var $dialog = null;

jQuery.showModalDialog = function (options) {

    var defaultOptns = {
        url: null,
        dialogArguments: null,
        height: 'auto',
        width: 'auto',
        position: 'center',
        resizable: true,
        scrollable: true,
        onClose: function () { },
        returnValue: null,
        doPostBackAfterCloseCallback: false,
        postBackElementId: null
    };

    var fns = {
        close: function () {
            opts.returnValue = $dialog.returnValue;
            $dialog = null;
            opts.onClose();
            if (opts.doPostBackAfterCloseCallback) {
                postBackForm(opts.postBackElementId);
            }
        },
        adjustWidth: function () { $frame.css("width", "100%"); }
    };

    // build main options before element iteration

    var opts = $.extend({}, defaultOptns, options);

    var $frame = $('<iframe id="iframeDialog" />');

    if (opts.scrollable)
        $frame.css('overflow', 'auto');

    $frame.css({
        'padding': 0,
        'margin': 0,
        'padding-bottom': 10
    });

    var $dialogWindow = $frame.dialog({
        autoOpen: true,
        modal: true,
        width: opts.width,
        height: opts.height,
        resizable: opts.resizable,
        position: opts.position,
        overlay: {
            opacity: 0.5,
            background: "black"
        },
        close: fns.close,
        resizeStop: fns.adjustWidth
    });

    $frame.attr('src', opts.url);
    fns.adjustWidth();

    $frame.load(function () {
        if ($dialogWindow) {

            var maxTitleLength = 50;
            var title = $(this).contents().find("title").html();

            if (title.length > maxTitleLength) {
                title = title.substring(0, maxTitleLength) + '...';
            }
            $dialogWindow.dialog('option', 'title', title);
        }
    });

    $dialog = new Object();
    $dialog.dialogArguments = opts.dialogArguments;
    $dialog.dialogWindow = $dialogWindow;
    $dialog.returnValue = null;
}

//function postBackForm(targetElementId) {
//    var theform;
//    theform = document.forms[0];
//    theform.__EVENTTARGET.value = targetElementId;
//    theform.__EVENTARGUMENT.value = "";
//    theform.submit();
//}

var prntWindow = getParentWindowWithDialog(); //$(top)[0];

var $dlg = prntWindow && prntWindow.$dialog;

function getParentWindowWithDialog() {
    var p = window.parent;
    var previousParent = p;
    while (p != null) {
        if ($(p.document).find('#iframeDialog').length) return p;

        p = p.parent;

        if (previousParent == p) return null;

        // save previous parent

        previousParent = p;
    }
    return null;
}

function setWindowReturnValue(value) {
    if ($dlg) $dlg.returnValue = value;
    window.returnValue = value; // in case popup is called using showModalDialog

}

function getWindowReturnValue() {
    // in case popup is called using showModalDialog

    if (!$dlg && window.returnValue != null)
        return window.returnValue;

    return $dlg && $dlg.returnValue;
}

if ($dlg) window.dialogArguments = $dlg.dialogArguments;
if ($dlg) window.close = function () { if ($dlg) $dlg.dialogWindow.dialog('close'); };

function CloseWindow() {
    if ($dlg) {
        $dlg.dialogWindow.dialog('close');
    } else {
        ForceCloseWindow();
    }
}

function ForceCloseWindow() {
    var browserName = navigator.appName;
    var browserVer = parseInt(navigator.appVersion);
    //alert(browserName + " : "+browserVer);

    //document.getElementById("flashContent").innerHTML = "<br>&nbsp;<font face='Arial' color='blue' size='2'><b> You have been logged out of the Game. Please Close Your Browser Window.</b></font>";

    if (browserName == "Microsoft Internet Explorer") {
        var ie7 = (document.all && !window.opera && window.XMLHttpRequest) ? true : false;
        if (ie7) {
            //This method is required to close a window without any prompt for IE7 & greater versions.
            window.open('', '_parent', '');
            window.close();
        }
        else {
            //This method is required to close a window without any prompt for IE6
            this.focus();
            self.opener = this;
            self.close();
        }
    } else {
        //For NON-IE Browsers except Firefox which doesnt support Auto Close
        try {
            this.focus();
            self.opener = this;
            self.close();
        }
        catch (e) {

        }

        try {
            window.open('', '_self', '');
            window.close();
        }
        catch (e) {

        }
    }
}