Javascript showModalDialog() Function

In Web application we can use window.showMadalDialog() to popup a modal window. Now let's take a deep look at how to use this function.

1. Syntax

var vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures]);

parameters description:

sURL - required. data type : string. It refer to the URL of target ducument to link to.

vArguments - optional. data type : variant. It can be an object, an array. It is used to pass value to the target document. Using window.dialogArguments to retrieve the value passed in by this parameter.

sFeatures - optional. data type : string. It is used to setup look & feel of the dialog,such as height,width, show address bar or not, show status bar or not,resizable or not,etc. properties separate by semicolon(;).

2. Sample Code

1) Popup Modal Window Without Arguments

showModalWindow(url, '_blank',600,240, 'left=150,top=150,toolbar=no,menubar=no,scrollbars=no,location=no,resizable=no,status=no');

2) Popup Modal Window With Arguments

in the parent page:

var argObject = new Object();

argObject.username = 'eric';

argObject.age = '30';

var retValue = window.showModalDialog('myTargetPage.aspx', argObject, 'dialogWidth=400px;dialogHeight=150px;left=150,top=150,toolbar=no,menubar=no,scrollbars=no,location=no,resizable=no,status=no');

// do something else after got the return value from Modal Dialog here

and in the modal dialog:

var argObject = window.dialogArguments;

// do something here....

window.returnValue = "return from modal dialog";
window.self.close();

3) a modal window works for both IE and Firefox

function showModalWindow(url,name,width,height,decorate) {
if (window.showModalDialog) {
window.showModalDialog(url, window, 'dialogWidth=' + width + 'px;dialogHeight=' + height + 'px;' + decorate);
}
else {
window.open(url,name,'width=' + width + ',height=' + height + ',' + decorate + ',modal=yes');
}
}

4. Reference link

http://javascript.about.com/library/blmodal.htm

http://dev.csdn.net/htmls/27/27760.html