ShowModalDialog modal dialog box usage and browser compatibility _javascript tips

Source: Internet
Author: User
Tags generator

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.