What is Modaldialog.
ShowModalDialog is a method of the Js window object, which, like Window.Open, opens a new page.
The difference is that when ShowModalDialog opens a child window, the parent window cannot get the focus (that is, it cannot be manipulated).
You can set the value of window.returnvalue in a child window so that the parent window can get the return value.
An example
1) main Window main.html,
2) Open the child window in the main window by ShowModalDialog way sub.html
3) Set returnvalue in child window to return to main window using
Main.html
<HTML>
<HEAD>
<meta name= "GENERATOR" content= "oscar999" >
</HEAD>
< script>
function ShowModal ()
{
var ret = window.showmodaldialog ("sub.html?temp=" +math.random ());
Alert ("Sub return value is" +ret);
}
</script>
<BODY>
<input id=button1 Type=button value= "Open sub" name=button1 onclick= " ShowModal (); " >
</BODY>
</HTML>
Sub.html
<HTML>
<HEAD>
<meta name= "GENERATOR" content= "oscar999" >
</HEAD>
<script>
function Returnmain ()
{
window.returnvalue = "return from sub";
Window.close ();
}
</script>
<BODY>
<input id=button1 Type=button value= "return and close" Name=button1 onclick = "Returnmain ()" >
</BODY>
</HTML>
Special Note: When ShowModalDialog method is used in main.html, the purpose of using math.random () is to avoid caching.
ShowModalDialog Detailed use
Vreturnvalue = window.showModalDialog (sURL [, varguments] [, Sfeatures])
sURL
Required parameter, type: String. Used to specify the URL of the document to be displayed by the dialog box.
Varguments
Optional parameter, type: Variant. Used to pass parameters to the dialog box. There are no limits on the types of arguments passed, including arrays. The dialog box uses window.dialogarguments to get the arguments passed in.
Sfeatures
Optional parameter, type: String. Used to describe the appearance of the dialog box and other information, you can use the following one or several, with a semicolon ";" Separated.
Dialogheight dialog height, not less than 100px,ie4 in dialogheight and dialogwidth the default unit is EM, and IE5 is PX, for the convenience of its see, in the definition of modal Mode dialog box, use PX to do the unit.
Dialogwidth: The width of the dialog box.
Dialogleft: The distance from the desktop to the left.
Dialogtop: Distance from the desktop.
Center: {yes | no | 1 | 0}: Window is centered, default Yes, but can still specify height and width.
Help: {yes | no | 1 | 0}: Whether to display the Assist button, default yes.
Resizable: {yes | no | 1 | 0} [ie5+]: Whether the size can be changed. Default No.
Status: {yes | no | 1 | 0} [ie5+]: Whether the status bar is displayed. Default is yes[Modeless] or no[modal].
scroll:{Yes | no | 1 | 0 | on | off}: Indicates whether the dialog box displays a scroll bar. The default is yes.
There are several properties that are used in an HTA and are generally not used in general Web pages.
dialoghide:{Yes | no | 1 | 0 | on | off}: Whether the dialog box is hidden when printing or printing preview. The default is No.
edge:{Sunken | raised}: Indicates the border style of the dialog box. The default is raised.
unadorned:{Yes | no | 1 | 0 | on | off}: default is No.
Browser compatible
But not all browsers are compatible with such usage.
Running the above example in Chrome, the parent window can get the focus, the effect is the same as window.open, and the Returnvale is undefined.
The following are the support conditions for this approach by the mainstream browsers.
| Browser |
is supported |
State |
| IE9 |
0 |
|
| Firefox13.0 |
0 |
|
| safari5.1 |
0 |
|
| chrome19.0 |
X |
Not modal dialog box, but open a new form |
| Opera12.0 |
X |
Nothing happens, and even a form doesn't play. |
If there is an incoming varguments this parameter is window:
var ret = window.showModalDialog ("sub.html?temp=" +math.random (), window);
In the child window, the following values are:
| Browser |
modal dialog box |
Window.opener |
Window.dialogarguments |
ReturnValue |
| IE9 |
0 |
Undefined |
[Object Window] |
0 |
| Firefox13.0 |
0 |
[Objectwindow] |
[Object Window] |
0 |
| safari5.1 |
0 |
[Objectwindow] |
[Object Window] |
0 |
| chrome19.0 |
X |
[Objectwindow] |
Undefined |
X |
Note that under the Firefox browser, if the subform is refreshed, window.dialogarguments will be lost and become undefined. We can see the return value in the above results returnvalue only the Chrome browser returned is undefined, no other browser has a problem
How to fix chrome's compatibility issues.
Direction is: Set Window.opener.returnvalue= ""
Main.html
<HTML>
<HEAD>
<meta name= "GENERATOR" content= "oscar999" >
</HEAD>
< script>
function ShowModal ()
{
var ret = window.showmodaldialog ("sub.html?temp=" +math.random (), window);
For Chrome
if (ret==undefined)
{
ret = window.returnvalue;
}
Alert ("Sub return value is" +ret);
}
</script>
<BODY>
<input id=button1 Type=button value= "Open sub" name=button1 onclick= " ShowModal (); " >
</BODY>
</HTML>
Sub.html
<HTML>
<HEAD>
<meta name= "GENERATOR" content= "oscar999" >
</HEAD>
< script>
function Returnmain ()
{
if (window.opener!=undefined)
{
Window.opener.returnValue = "return from sub";
} else{
window.returnvalue = "return from sub";
}
Window.close ();
}
</script>
<BODY>
<input id=button1 Type=button value= "return and close" Name=button1 onclick = "Returnmain ()" >
</BODY>
</HTML>
This is to determine whether certain objects are defined to differentiate the browser. Of course, the type of browser can also be judged by the way
http://blog.csdn.net/oscar999/article/details/8272798
Here is the returnvalue that borrows the parent window to use, if the parent window's returnvalue is also used in other ways, as:
var oldValue = Window.returnvalue;
var newvalue = ShowModalDialog ()
Window.returnvalue = OldValue
It is important to note that the tests under chrome need to put the HTML file into the Web server (Tomcat,...) The test is accessed through the HTTP URL. Otherwise it will not succeed.
