ShowModalDialog modal dialog box usage and browser compatibility

ShowModalDialog modal dialog box usage and browser compatibility _javascript tips

Last Update:2017-01-19 Source: Internet

Author: User

Tags generator

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

What's 1.ModalDialog?
ShowModalDialog is a way to Jswindow objects, just like window.open open a new page.
The difference is that when ShowModalDialog opens a child window, the parent window cannot get focus (that is, it cannot be manipulated).
You can set the Window.returnvalue value in a child window so that the parent window can get the returnvalue.

2. An example
1) main Window main.html,
2 Open the child window by ShowModalDialog in the main window sub.html
3 in the child window set returnvalue return to the main window to use

Main.html

Copy Code code 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 Code code 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>

Special note: In main.html ShowModalDialog method, there is use to math.random () to avoid caching.

3.showModalDialog detailed use
Vreturnvalue=window.showmodaldialog (Surl[,varguments][,sfeatures])
sURL
Required parameter, type: String. The URL used to specify the document to display in the dialog box.
Varguments
Optional parameter, type: Variant. Used to pass parameters to the dialog box. The parameter types passed are not limited, including arrays, and so on. The dialog box is window.dialogarguments to get the parameters passed in.
Sfeatures
Optional parameter, type: String. Used to describe information such as the appearance of a dialog box, you can use one or more of the following, with a semicolon ";" Separated.
Dialogheight dialog box height, not less than 100px,ie4 dialogheight and dialogwidth The default unit is EM, and the IE5 is PX, for the convenience of its see, in the Definition of modal dialog box, with PX to do units.
Dialogwidth: Dialog box width.
Dialogleft: The distance from the left of the desktop.
Dialogtop: The distance from the desktop.
CENTER:{YES|NO|1|0}: The window is centered, the default yes, but the height and width can still be specified.
HELP:{YES|NO|1|0}: Does the Help button appear, 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 scroll bars. The default is yes.

There are several attributes that are used in an HTA and are generally not used in general Web pages.
Dialoghide:{yes|no|1|0|on|off}: Dialog box is hidden when printing or printing preview. The default is No.
Edge:{sunken|raised}: Indicates the border style of the dialog box. Default is raised.
Unadorned:{yes|no|1|0|on|off}: No is default.

4. Browser compatible
But not all browsers are compatible with this usage.
Running the above example in Chrome, the parent window can get the focus at any point, the effect is the same as window.open, and the Returnvale is undefined.
The following are the status of support for this method by the major browsers.

Browser	Whether to support	State
IE9	0
Firefox13.0	0
safari5.1	0
chrome19.0	X	is not modal dialog box, but open a new form
Opera12.0	X	Nothing happens, even a form doesn't play.

If there is an incoming varguments this parameter is window:

Copy Code code as follows:

var ret = window.showModalDialog ("sub.html?temp=" +math.random (), window);

In a 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, become undefined. We can see from the above results that the return value returnvalue only the Chrome browser is returning undefined, the other browsers are OK

5. How to solve the compatibility problem of Chrome.
The direction is: Set Window.opener.returnvalue= ""
Main.html

Copy Code code 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 Code code 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 with close" Name=button1 onclick= "Returnmain ()" >
</BODY>
</HTML>

This is to determine whether some objects are defined to differentiate between browsers. Of course, you can also judge the type of browser by the way

This is done using the returnvalue of the parent window, and if the returnvalue of the parent window can be used for other purposes, as:
var oldValue = Window.returnvalue;
var newvalue = ShowModalDialog ()
Window.returnvalue = OldValue

6. In particular, the tests under Chrome require that HTML files be put into the Web server (Tomcat,...) The test is accessed through the HTTP URL. Otherwise, it will not succeed.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More