window.showModalDialog() - Cross Browser, new version

Hello,

This is a continuation, or a new version for my last post about window.showModalDialog().

The new version was implemented as a jQuery function to which you can pass options which you like.
This version was made because:
    1) The impossibility of previous version to retain dialogArguments during postback;
    2) The impossibility of previous version to close the dialog when the target page is inside several iframe tags;
    3) The impossibility of previous version to retain window.returnValue during postback;
    4) It will be possible now to fire a postback of the page or to fire a postback of a element (with targetElementId) right after the dialog was closed and the callback function finished to execute;
    5) Theoretically this popup library can be used to open another popup inside an existing one (Note: I haven't tried this yet).

However, previous version of my showModalDialog can satisfy someone's requirements and it will be no need to complicate his life with the new version.


I say "complicate his life" because new version requires the inclusion of some javascript code on the target Page that is going to be shown in the popup. But this should not be a problem for those who have base class for every page, see below more details.

Here is the showModalDialog jQuery function code:

Code:

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();
}

Bowser Support

Some Code Explained

The use of this function is very simple, you just need to call $.showModalDialog(options) where options are:

      - url: Default - null,

      - dialogArguments: Default - null,

      - height: Default - 'auto',

      - width: Default - 'auto',

      - position: Default - 'center',

      - resizable: Default - true,

      - scrollable: Default - true,

      - onClose: Default - function() { },

      - doPostBackAfterCloseCallback: Boolean. If true then after firing onClose event the base form will make a postback. Default - false,

      - postBackElementId: String. This have sense only when doPostBackAfterCloseCallback is set to true, and if has value then it will be as the set as the eventTarget for this postback, otherwise null. Default - null

Note: These options have the same meaning as in previous version, excepting the new options, which are: doPostBackAfterCloseCallback 

In order to get the return value you will call this.returnValue from within the onClose callback function.

The code to include in the Target page (in the popup)

Below code you will have to include in all popups pages, you could make it as a separate Javascript library and just include it in the potential popup page. It will not do anything inside the page which will not be used as a popup.

Another option, about I was writing earlier in this post is to create a base class for page object (in C# or other programming language which gives this possibility) from which to inherit all your pages. In this base class you will have to override the page Render event to include this script or include the reference to the Javascript file, depends on your choice. By overriding the Render page you could also include jQuery in each page from your site, but this is another subject.

Here is the code that you need to include on every page / or potential popup page if we can say so.

Code:

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'); };

Any question let me know.

Did it help you? :)

UPDATE March 12: I have figured out that window.showModalDialog is now working on FF 3 and up, and also in Safari 3.1 and up. But it is still  not working on Chrome.

UPDATE March 29: Here is an example of how to use this function.

Code:

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(); 


Many thanks to Yang for this.

You can find a sample code here.
Please share this article with others!