1. What is ModalDialog?
ShowmodalDialog is a method of JSWINDOW object. Like Window.open, it is a new page.
The difference is: after the showmodaldialog is opened, the parent window cannot get the focus (that is, it cannot be operated).
You can set the value of Window.returnValue in the sub -window, so that the parent window can get this ReturnValue.
2. One example
1) Main.html in the main window,
2) Open the sub -window sub.html in the main window via ShowmodalDialog
3) Set ReturnValue in the sub -window and return to the main window to use
main.html
Copy code code as follows:
<Html>
<Head>
<Medaname = "Generator" Content = "Oscar999">
</Head>
<script>
Functionshowmodal ()
{{
varret = window.showmodalDialog ("sub.html? Temp ="+math.random ());
Alert ("SubreturnValueis"+Ret);
}
</script>
<body>
<InputId = Button1Type = ButtonValue = "OpenSub" name = Button1onClick = "Showmodal ();">>
</Body>
</Html>
sub.html
Copy code code as follows:
<Html>
<Head>
<Medaname = "Generator" Content = "Oscar999">
</Head>
<script>
Functionreturnmain ()
{{
window.returnValue = "ReturnFromsub";
window.close ();
}
</script>
<body>
<InputId = Button1Type = ButtonValue = "ReturnandClose" name = Button1onClick = "Returnmain ()">
</Body>
</Html>
Special explanation: When the method of showmodalDialog in Main.html, the purpose of using math.random () is to avoid cache.
3.ShowmodalDialog in detail
vreturnValue = Window.showmodalDialog (Surl [, Varguments] [, Sfeatures]))
SURL
Must -choose parameters, type: string. URL used to specify the document to be displayed in the dialog box.
varguments
Optional parameters, type: variant. Used to pass parameters to the dialog box. The parameter type passed by is not limited, including array, etc. The dialog box obtains parameters passed in through Window.Dialogarguments.
sfeatures
Optional parameters, type: string. Used to describe the appearance and other information of the dialog box, you can use one or more below, and use the segment ";" to separate.
The Dialogheight dialog box height, not less than 100px, Dialogheight and Dialogwidth in IE4 are EM, and IE5 is PX. To facilitate their opinions, when defining the MODAL dialog box, use PX as a unit.
dialogwidth: dialog box width.
dialogleft: distance from the left of the desktop.
dialogtop: distance from the desktop.
Center: {Yes | NO | 1 | 0}: Whether the window is centered, the default yes, but the height and width can still be specified.
help: {yes | no | 1 | 0}: Whether to display the help button, default yes.
resizable: {yes | no | 1 | 0} [ie5 +]: Whether it can be changed. The default NO.
Status: {yes | no | 1 | 0} [IE5+]: Whether to display the status bar. The default is yes [modeless] or no [modal].
scroll: {yes | no | 1 | 0 | 0 | OFF}: indicate whether the dialog box displays the rolling bar. The default is yes.
There are several attributes used in HTA, which are generally not used in general web pages.
dialogHide: {yes | no | 1 | 0 | 0 | OFF}: Whether the dialog box is hidden during printing or printing preview. The default is NO.
EDGE: {SUNKEN | RAISED}: indicate the frame style of the dialog box. The default is raise.
unadorned: {yes | no | 1 | 0 | 0 | OFF}: The default is NO.
4. Browser compatibility
But not all browsers are compatible with this usage.
If you run the above example in Chrome, the parent window can obtain the focus at will. The effect is the same as Window.open, and the returnvale obtained is also undefined.
The following is the support of the mainstream browsers on this method.
| Browser | Whether to support | state |
| IE9 | ○ | |
| Firefox13.0 | ○ | |
| safari5.1 | ○ | |
| chrome19.0 | × | It's not a modal dialog box, but OPEN has a new window |
| Opera12.0 | × | Everything happened, not even a window |
If there is a parameter that is introduced in VARGUMENTS to Window:
Copy code code as follows:
var return = window.showmodalDialog ("sub.html? Temp ="+math.random (), window);
In the sub -window, the following value is:
| Browser | Modal dialog | window.opner | Window.DialogarGuments | Returnvalue |
| IE9 | ○ | undefined | [Object Window] | ○ |
| Firefox13.0 | ○ | [Objectwindow] | [Objectwindow] | ○ |
| safari5.1 | ○ | [Objectwindow] | [Objectwindow] | ○ |
| chrome19.0 | × | [Objectwindow] | undefined | × |
Note that under the Firefox browser, if the sub -window is refreshed, Window.Dialogarguments will still be lost and become undefined. In the above results, we can see that the return value Returnvalue is that only the Chrome browser returns Undefined, and there are no problems with other browsers.
5. How to solve the compatibility of Chrome.
The direction is: set window.opner.returnValue = "" "
main.html
Copy code code as follows:
<Html>
<Head>
<Meta name = "general" content = "oscar999">
</Head>
<script>
Function Showmodal ()
{{
var return = 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
Copy code code as follows:
<Html>
<Head>
<Meta name = "general" content = "oscar999">
</Head>
<script>
Function Returnmain ()
{{
if (Window.opner! = Undefined)
{{
Window.opner.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 distinguish browsers. Of course, you can also judge the type of browser type
This is used to use the ReturnValue of the parent window. If the ReturnValue of the parent window can also be performed in a replacement method in other purposes, as:
Var Oldvalue = Window.returnValue;
var newvalue = showmodalDialog ()
Window.returnValue = OldValue
6. It should be noted that the test under chrome needs to put the HTML file into the Web Server (tomcat, ...) to access the test under the HTTP URL. Otherwise, it will not succeed.