How to Use the showModalDialog modal dialog box and browser compatibility _ javascript skills

ShowModalDialog is a jswindow object method, which opens a new page like window. open. The difference is: after showModalDialog opens the sub-window, the parent window cannot get the focus (that is, the operation cannot be performed) 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

The Code is as follows:

Script
Functionshowmodal ()
{
Varret = window. showModalDialog ("sub.html? Temp = "+ Math. random ());
Alert ("subreturnvalueis" + ret );
}
Script

Sub.html

The Code is as follows:

Script
FunctionreturnMain ()
{
Window. returnValue = "returnfromsub ";
Window. close ();
}
Script

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:

The 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

The Code is as follows:

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

Sub.html

The Code is as follows:

Script
Function returnMain ()
{
If (window. opener! = Undefined)
{
Window. opener. returnValue = "return from sub ";
} Else {
Window. returnValue = "return from sub ";
}
Window. close ();
}
Script

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.