Home > Developer > JavaScript
1. What is ModalDialog?
ShowModalDialog is a jswindow object method, which opens a new page like window. open.
The difference is: after showModalDialog opens the subwindow, the parent window cannot get the focus (that is, it cannot be operated ).
You can set the value of window. returnValue in the subwindow so that the parent window can obtain this returnvalue.
2. An example
1 Main Window main.html,
2nd, in the main window, use the showmodaldialogformat to open the sub.html window.
3) set returnValue in the subwindow and return it to the main window.
Main.html
Copy codeThe Code is as follows:
<HTML>
<HEAD>
<METANAME = "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 codeThe Code is as follows:
<HTML>
<HEAD>
<METANAME = "GENERATOR" Content = "oscar999">
</HEAD>
<Script>
FunctionreturnMain ()
{
Window. returnValue = "returnfromsub ";
Window. close ();
}
</Script>
<BODY>
<INPUTid = button1type = buttonvalue = "returnandclose" name = button1onclick = "returnMain ()">
</BODY>
</HTML>
Note: When showModalDialog is used in main.html, Math. random () is used to avoid caching.
3. showModalDialog
VReturnValue = window. showModalDialog (sURL [, vArguments] [, sFeatures])
SURL
Required parameter. Type: string. Specifies the URL of the document to be displayed in the dialog box.
VArguments
Optional parameter; Type: variant. Used to pass parameters to the dialog box. The passed parameter types are not limited, including arrays. The dialog box uses window. dialogArguments to obtain the passed parameters.
SFeatures
Optional parameter; Type: String. Used to describe the appearance and other information of the dialog box. You can use one or more of the following, separated by semicolons.
In the dialogHeight dialog box, the height is not smaller than px. In IE4, the default unit of dialogHeight and dialogWidth is em, while in IE5, the default unit is px. For convenience, When you define the modal mode dialog box, unit with px.
DialogWidth: Dialog Box width.
DialogLeft: The left distance from the desktop.
DialogTop: the distance from the desktop.
Center: {yes | no | 1 | 0}: whether the window is centered. The default value is yes, but the height and width can still be specified.
Help: {yes | no | 1 | 0}: whether to display the help button. The default value is yes.
Resizable: {yes | no | 1 | 0} [IE5 +]: whether the size can be changed. No by default.
Status: {yes | no | 1 | 0} [IE5 +]: whether to display the status bar. The default value is yes [Modeless] or no [Modal].
Scroll: {yes | no | 1 | 0 | on | off}: Specifies whether the scroll bar is displayed in the dialog box. The default value is yes.
There are also several attributes used in HTA, which are generally not used in general web pages.
DialogHide: {yes | no | 1 | 0 | on | off}: whether the dialog box is hidden when printing or previewing. The default value is no.
Edge: {sunken | raised}: Specifies the border style of the dialog box. The default value is raised.
Unadorned: {yes | no | 1 | 0 | on | off}: no by default.
4. browser compatibility
But not all browsers are compatible.
If you run the preceding example in Chrome, the parent window can obtain the focus randomly. The effect is the same as that in window. open, and the obtained returnVale is also undefined.
The following describes the support of mainstream browsers for this method.
| Browser | Supported? | Status |
| IE9 | ○ | |
| Firefoxbench | ○ | |
| Safari5.1 | ○ | |
| Chrome19.0 | × | A new form is opened instead of a modal dialog box. |
| Opera12.0 | × | Nothing happens, not even a form |
If the input vArguments parameter is window:
Copy codeThe Code is as follows:
Var ret = window. showModalDialog ("sub.html? Temp = "+ Math. random (), window );
In the subwindow, the following values are:
| Browser | Modal Dialog Box | Window. opener | Window. dialogArguments | ReturnValue |
| IE9 | ○ | Undefined | [Object Window] | ○ |
| Firefoxbench | ○ | [ObjectWindow] | [Object Window] | ○ |
| Safari5.1 | ○ | [ObjectWindow] | [Object Window] | ○ |
| Chrome19.0 | × | [ObjectWindow] | Undefined | × |
Note that in the Firefox browser, window. dialogArguments will still be lost if the child form is refreshed and become undefined. In the above results, we can see that the returned returnValue is undefined only returned by chrome, and no problem exists in other browsers.
5. How to Solve Chrome compatibility problems.
Direction: Set window. opener. returnValue = ""
Main.html
Copy codeThe Code is as follows:
<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
Copy codeThe Code is as follows:
<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 some objects are defined to distinguish browsers. Of course, you can also determine the browser type.
Here, the returnValue of the parent window is used. If the returnValue of the parent window is used for other purposes, you can use the replacement method.:
Var oldValue = window. returnValue;
Var newValue = showModalDialog ()
Window. returnValue = oldValue
6. Note that html files need to be put into web server (Tomcat,...) for testing in Chrome and accessed through http url. Otherwise, it will fail.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
