The use of JS Mode window (modal dialog box and modeless dialog box) Introduction _ Basics

Source: Internet
Author: User

JavaScript inside the Split-mode dialog box and modeless dialog box, in fact, the difference is that the dialog box is closed before the user can work on the other parts of the same page. For example, the Open File dialog box is a typical modal dialog box where you can make an action on this dialog box to do other things with the program that opens the dialog box, not the modal dialog box.

Modal dialog box: ShowModalDialog
Non-modal dialog box: showModelessDialog

Vreturnvalue = window.showModalDialog (sURL [, varguments] [, Sfeatures])
Vreturnvalue = Window.showmodelessdialog (sURL [, varguments] [, Sfeatures])

Return value: Vreturnvalue, returned by the dialog box is the return value of course;
sURL: Must choose, for you to open the page;

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.
1.dialogHeight: Dialog height, not less than 100px,ie4 dialogheight and dialogwidth The default unit is EM, and IE5 is PX, in order to facilitate its see, in the Definition of modal dialog box, with PX to do units.
2.dialogWidth: Dialog box width.
3.dialogLeft: The distance from the left of the screen.
4.dialogTop: The distance from the screen.
5.center: {yes | no | 1 | 0}: The window is centered, the default yes, but the height and width can still be specified.
6.help: {yes | no | 1 | 0}: Show Help button, default yes.
7.resizable: {yes | no | 1 | 0} [ie5+]: can be changed size. Default No.
8.status: {yes | no | 1 | 0} [ie5+]: Show status bar. Default is yes[Modeless] or no[modal].
9.scroll:{Yes | no | 1 | 0 | on | off}: Indicates whether the dialog box displays scroll bars. The default is yes.
The following properties are used in an HTA and are generally not used in general Web pages.
10.dialoghide:{Yes | no | 1 | 0 | on | off}: Dialog box is hidden when printing or printing preview. The default is No.
11.edge:{Sunken | raised}: Indicates the border style of the dialog box. Default is raised.
12.unadorned:{Yes | no | 1 | 0 | on | off}: default is No.

Parameter passing:

1. To pass the parameter to the dialog box, it is passed through varguments. Type is not restricted, for a string type, the maximum is 4,096 characters. You can also pass objects, for example:
-------------------------------
Parent.htm

<script> 
var obj = new Object (); 
Obj.name= "51js"; 
window.showModalDialog ("modal.htm", obj, "dialogwidth=200px;dialogheight=100px"); 
</script>

Modal.htm

<script> 
var obj = window.dialogarguments 
alert ("The parameter you passed is:" + obj.name) 
</script>

-------------------------------
2. You can return information by Window.returnvalue to the window that opens the dialog box, or you can also be an object. For example:
------------------------------
Parent.htm

<script> 
str =window.showmodaldialog ("modal.htm", "dialogwidth=200px;dialogheight=100px"); 
alert (str); 
</script>

Modal.htm

<script> 
window.returnvalue= "http://www.51js.com"; 
</script>

After opening a modal window with window.showModalDialog or window.showmodelessdialog, some interaction problems with the parent window.
To interoperate, the second parameter passes the window when the ShowModalDialog or showModelessDialog method is invoked, such as:
Window.showmodelessdialog (' filename.htm ', window, ' dialogwidth=200px;dialogheight=250px; ')
Next, is to get some of the parent window data and methods, which is often used, the parent window to take the child window parameters generally through the returnvalue can be done

Gets the JS variable var window.dialogArguments.var of the parent window 
; 
Gets the object and property Window.dialogArguments.form1.name.value of the parent window 
; 
The method to invoke the parent window Fun
window.dialogArguments.fun ();

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.