Script for Popup in Chrome Replacement of window.showModalDialog

Introduction

window.showModalDialog feature is deprecated and has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Do not use it in old or new projects. Pages or Web apps using it may break at any time. If we are using window.showModelDialog to work in Chrome, use the script.

Script for window.showModalDialog to work in Chrome Browser

Add the script in the js file and include the script in the ASP.NET aspx file.

Check the browser is Chrome:

var isChrome = !!window.chrome && !!window.chrome.webstore;

Overwrite the callback method to window.showModelDialog if it is chrome browser. The JavaScript function chromepop will be called in case of Chrome browser.

ChromePopup = function (url, arg, feature) {
    var opFeature = feature.split(";");
    var featuresArray = new Array()
    for (var i = 0; i < opFeature.length - 1; i++) {
        var f = opFeature[i].split(":");
        featuresArray[f[0].toString().trim().toLowerCase()] = f[1].toString().trim();
    }

    var h = "200px", w = "400px", l = "100px", 
    t = "100px", r = "no", c = "yes", s = "no";
    if (featuresArray["dialogheight"]) h = featuresArray["dialogheight"];
    if (featuresArray["dialogwidth"]) w = featuresArray["dialogwidth"];
    if (featuresArray["dialogleft"]) l = featuresArray["dialogleft"];
    if (featuresArray["dialogtop"]) t = featuresArray["dialogtop"];
    if (featuresArray["resizable"]) r = featuresArray["resizable"];
    if (featuresArray["center"]) c = featuresArray["center"];
    if (featuresArray["status"]) s = featuresArray["status"];
    var modelFeature = "height = " + h + ",width = " + w + ",left=" + l + ",top=" + 
                        t + ",model=yes,alwaysRaised=yes,directories=no,titlebar=no,toolbar=no,
                        location=no,status=no,menubar=no" + ",resizable= " + r + ",celter=" + 
                        c + ",status=" + s;
    var model = window.open(url, "", modelFeature, null);
    model.dialogArguments = arg;
// check the new attribute to refresh parent window or not
    if (window.showModalDialog.refreshParent) {
        reloadPage(model);
    }
    return model;
}

Assign the chromePopup function to the window.showModalDialog.

$(document).ready(function () {
    if (isChrome) {
        window.showModalDialog = ChromePopup;
    }
});

Reload the parent window:

function reloadPage(returnValue) {
    var timer = setInterval(function () {
        if (returnValue.closed) {
            clearInterval(timer);
            this.window.location.reload();
        }
    }, 1000);
}

Set new attribute to refresh parent:

function RefreshParent(isRefresh) {
    if (isChrome) {
        window.showModalDialog.refreshParent = isRefresh;
    }
}

Call the script in the aspx file (note, include RefreshParent(true) to fresh parent window):

// Calling from aspx page
 function ShowModalWindow() {
        // true to refresh the parent after popup closed
        RefreshParent(false);
        window.showModalDialog("www.google.com", "", 
        "dialogHeight:600px;dialogWidth:990px;resizable:no;status:no;");
        return false;
    }