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:

// do something here....

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

3. showModalDialog Function will Load Page Cache

You may have noticed that when you have data changed for the modal window, then reopen the modal window, the page did not update. This is because that when you call showModalDialog(), IE will load the page cache and did not refresh the page content. To avoid this issue, Please do any of the alternatives below.

add this code line inside Page_Load()

this.Page.Response.Expires = 0;

or

Context.Response.Cache.SetCacheability(HttpCacheability.NoCache);

4. Reference link

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

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

[@more@]