Comparison between window. Open and window. showmodaldialog

 

Window. Open and window. showmodaldialog are both used to open subwindows.

In the open mode, a subwindow is opened directly. However, a subwindow is not displayed on IE7 and IE8, but is opened on a new tab. This poses two problems. One is that the operation is not convenient, the other is that the window size is explicitly specified when the window is opened, but the window size set is useless because it is opened on a tab, and the content of the page is fully opened in a new window, the page that was originally designed to be opened is completely deformed. In this case, it is best to use dialog to open a window. Note the following when using it to open a window.

1. Set window parameters:
Open parameters are generally separated by commas;
Dialog is separated by semicolons;
Window. open () parameters:
Window. open ('page.html ', 'newwindow', 'height = 100, width = 400, Top = 0, Left = 0, toolbar = No, menubar = No, rollbars = No, resizable = No,
Location = No, status = no ');
Parameter description:
Window. Open command to pop up a new window;
'Page.html 'name of the pop-up window;
'Newwindow' indicates the name of the pop-up window (not the file name). It is optional and can be replaced by null;
Height = 100 window height;
Width = 400 window width;
Top = the pixel value between the 0 window and the top of the screen;
Left = 0 the pixel value between the window and the left of the screen;
Toolbar = No indicates whether to display the toolbar. Yes indicates display;
Menubar and scrollbars indicate the menu bar and scroll bar.
Resizable = No: whether to change the window size. Yes: Yes;
Location = No indicates whether the address bar is displayed. Yes indicates yes;
Status = No whether to display the information in the status bar (usually the file has been opened), yes is allowed;

Window. showmodaldialog (Surl, varguments, sfeatures) parameters:
Required parameter showmodaldialog('page.html ', '', 'resizable: Yes; scroll: Yes; Status: No; dialogwidth = 320px; dialogheight = 230px; center = yes;
Help = no ');
Parameter description:
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.
1. dialogheight: the dialog box height, not smaller than 100px.
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}: whether the window is centered. The default value is yes, but the height and width can still be specified.
6. Help: {Yes | no | 1 | 0}: whether to display the Help button. The default value is yes.
7. resizable: {Yes | no | 1 | 0} [ie5 +]: whether the size can be changed. No by default.
8. Status: {Yes | no | 1 | 0} [ie5 +]: whether to display the status bar. The default value is Yes [modeless] or no [modal].
9. Scroll: {Yes | no | 1 | 0 | on | off}: Specifies whether the scroll bar is displayed in the dialog box. The default value is yes.
The following attributes are used in HTA and are not used in general web pages.
10. dialoghide: {Yes | no | 1 | 0 | on | off}: whether the dialog box is hidden when printing or previewing. The default value is no.
11. Edge: {sunken | raised}: Specify the border style of the dialog box. The default value is raised.
12. unadorned: {Yes | no | 1 | 0 | on | off}: No by default.

2. How to access elements in the parent window:
You can use window. opener to open a subwindow, for example, window. opener. User. value =.
The subwindow opened in the form of dialog is written in the window. in showmodaldialog, use window as the second parameter of the method, and then use window in the subwindow. dialogarguments can be used to locate the window object of the parent window. For example, var bb = window.dialogarguments;bb.doc ument. getelementbyid ("user"). value = LA.
Example 3:
Question 1: I want to bring up a window. In the pop-up window, select or enter some information to request the information to be returned to the parent page.
Create parent page: a.htm

1. <HTML>
2. <Head>
3. <Title> </title>
4. <MCE: script language = "JavaScript" type = "text/JavaScript"> <! --
5. Function openwin (){
6. VaR getv = showmodaldialog ("B .htm", "", "dialogwidth: 320px; dialogheight: 200px; Status: No; help: yes ");
7. If (getv! = NULL ){
8. Document.forms000002.16.txt name. value = getv. Split (",") [0];
9. Document.forms000002.16.txt age. value = getv. Split (",") [1];
10. }
11. }
12. // --> </MCE: SCRIPT>
13. </Head>
14. <Body>
15. <Form ID = "form1" runat = "server" method = "Post">
16. <Input type = "text" name = "txtname" id = "txtname"/>
17. <Input type = "text" name = "txtage" id = "txtage"/>
18. <Input type = "button" name = "Submit" value = "open" onclick = "openwin ()"/>
19. </Form>
20. </Body>
21. </Html>

Create a subpage: B .htm

1. <HTML>
2. <Head>
3. <Title> </title>
4. <MCE: script language = "JavaScript" type = "text/JavaScript"> <! --
5. Function getvalue (){
6. // Window. returnvalue stores the content of values transmitted from the Child Window to the parent window.
7. Required parameter returnvalue=document.forms%0%.txt name. Value + "," parameter document.forms%0%.txt age. value;
8. Window. Close ();
9. } // --> </MCE: SCRIPT>
10. </Head>
11. <Body>
12. <Form ID = "form1" runat = "server" method = "Post">
13. <Br/>
14. Name: <input name = "txtname" type = "text" id = "txtname"/> <br/>
15. Age: <input name = "txtage" type = "text" id = "txtage"/>
16. <Input type = "button" name = "Submit" value = "Disable" onclick = "getvalue ()"/>
17. </Form>
18. </Body>
19. </Html>

The Mode window is used here. showmodaldialog (), using window. returnvalue = Window. showmodaldialog (Surl [, varguments] [, sfeatures]), we can open a modal window, the advantage of this window is that users can only operate on the current page, the parent page cannot be operated. It is often used in wizard or information acquisition pages. Using varguments, we can pass parameters on the parent page and the pop-up page. The parameters can be custom objects or references of any control on the parent page, this makes it easy for us to operate on each element on the parent page, making parameter transfer very easy.
Question 2: Discussion of the 2nd Parameters
Showmodaldialog ("subpage address", "Pass parameters to subpage", "subpage appearance Settings"), mainly studies the next 2nd parameters.
1. 2nd parameters are custom objects
We can define a JavaScript Object, define the values of various custom attributes, and then pass the object to the subpage.
For example, encapsulate the information on the parent page into an object and pass the object to the Child page.
Parent page: oneparent.htm

1. <HTML>
2. <Head>
3. <Title> the parent page transmits custom object parameters to the Child page </title>
4. <MCE: script language = "JavaScript" type = "text/JavaScript"> <! --
5. Function openwin (){
6. // Send the page and use the 2nd parameters of the mode window to pass an object to the subpage
7. VaR person = new object ();
8. Person.mynameappsdocument.forms%0%.txt name. value;
9. Person.myageappsdocument.forms%0%.txt age. value;
10. Window. showmodaldialog ("oneson.htm", person, ""); // The first parameter is an object.
11. }
12. // --> </MCE: SCRIPT>
13. </Head>
14. <Body>
15. <Form ID = "form1" runat = "server" method = "Post">
16. Name: <input type = "text" name = "txtname" id = "txtname"/>
17. Age: <input type = "text" name = "txtage" id = "txtage"/>
18. <Input type = "button" name = "Submit" value = "open" onclick = "openwin ()"/>
19. </Form>
20. </Body>
21. </Html>

Subpage: oneson.htm

1. <HTML>
2. <Head>
3. <Title> </title>
4. <MCE: script language = "JavaScript" type = "text/JavaScript"> <! --
5. Window. onload = function (){
6. // The dialog box uses window. dialogarguments to obtain the passed parameters.
7. VaR person = Window. dialogarguments;
8. Document.forms000002.16.txt name. value = person. myname;
9. Document.forms%0%.txt age. value = person. myage;
10. };
11. // --> </MCE: SCRIPT>
12. </Head>
13. <Body>
14. <Form ID = "form1" runat = "server" method = "Post">
15. <Br/>
16. Name: <input name = "txtname" type = "text" id = "txtname"/> <br/>
17. Age: <input name = "txtage" type = "text" id = "txtage"/>
18. <Input type = "button" name = "Submit" value = "close" onclick = "window. Close ()"/>
19. </Form>
20. </Body>
21. </Html>

Handler name object. If window. onload = function () {} is used to directly write the code in braces, you must put this js code block after </body>. If no runtime error occurs, you cannot find the document.forms%0%.txt name object.
2. The 2nd parameters are an element of the parent page.
We can pass the reference of the element object on the parent page to the Child page. With this reference, we can access the element object on the parent page.
For example, we can manipulate the attributes of the element object on the parent page by referencing the Element Object.
Parent page: twoparent.htm

1. <HTML>
2. <Head>
3. <Title> pass the parent page element to the Child page </title>
4. <MCE: script language = "JavaScript" type = "text/JavaScript"> <! --
5. Function openwin (){
6. // Send the page and use the 2nd parameters of the mode window to pass an object to the subpage
7. Window. showmodaldialog ("twoson.htm", parentdiv, ""); // The third parameter is the element object on the parent page.
8. }
9. // --> </MCE: SCRIPT>
10. </Head>
11. <Body>
12. <Form ID = "form1" runat = "server" method = "Post">
13. <Div id = "parentdiv">
14. Name: <input type = "text" name = "txtname" id = "txtname"/>
15. Age: <input type = "text" name = "txtage" id = "txtage"/>
16. <Input type = "button" value = "open" onclick = "openwin ()"/>
17. </Div>
18. </Form>
19. </Body>
20. </Html>

Subpage: twoson.htm

1. <HTML>
2. <Head>
3. <Title> </title>
4. <MCE: script language = "JavaScript" type = "text/JavaScript"> <! --
5. // Window. onload = function (){
6. // The dialog box uses window. dialogarguments to obtain the passed parameters.
7. VaR infokeyi = Window. dialogarguments;
8. //};
9. // --> </MCE: SCRIPT>
10. </Head>
11. <Body>
12. <Form ID = "form1" runat = "server">
13. <Div id = "childdiv">
14. </Div>
15. <Br/>
16. <! -- Note: displays the transmitted Element Information on the parent page. -->
17. <Input type = "button" value = "display information transmitted on the parent page" onclick = "childdiv. innerhtml = infokeyi. innerhtml"/>
18. <Input type = "button" value = "sub-page operation parent page information", onclick = 'infokeyi. style. backgroundcolor = "green" '/>
19. <! -- Note: display the passed parent Element Information -->
20. <Input type = "button" name = "Submit" value = "close" onclick = "window. Close ()"/>
21. </Form>
22. </Body>
23. </Html>

Comment out window here. onload = function () {}, directly write the code in braces to let the JS Code load first, and then load the elements in <body>. Otherwise, the infokeyi object cannot be found.
3. The first parameter is window.
If the first parameter is window, some data and methods of the parent window can be obtained. For example:
// Obtain the JS variable VAR of the parent window
Window. dialogarguments. variables in the parent window;
// Obtain the objects and attributes of the parent window
Window. dialogarguments. form1. name. Value in the parent window;
// Call the parent window method fun
Window. dialogarguments. Methods in the parent window;
Parent page: threeparent.htm

1. <HTML>
2. <Head>
3. <Title> pass the parent page element to the Child page </title>
4. <MCE: script language = "JavaScript" type = "text/JavaScript"> <! --
5. // Open the window
6. Function openwin (){
7. Window. showmodaldialog ("threeson.htm", window, "dialogwidth: 300px; dialogheight: 200px; Status: No"); // The third parameter is the window object.
8. }
9. // Define the variable to be called in a subwindow
10. VaR age = 20;
11. // Define the method to be called in a subwindow
12. Function gethello (){
13. Return "Hello, world! ";
14. }
15. // --> </MCE: SCRIPT>
16. </Head>
17. <Body>
18. <Form ID = "form1" runat = "server" method = "Post">
19. <Div id = "parentdiv" align = "center">
20. Name: <input type = "text" name = "txtname" id = "txtname"/>
21. <Input type = "button" value = "open" onclick = "openwin ()"/>
22. </Div>
23. </Form>
24. </Body>
25. </Html>

Subpage: threeson.htm

1. <HTML>
2. <Head>
3. <Title> </title>
4. <MCE: script language = "JavaScript" type = "text/JavaScript"> <! --
5. Window. onload = function (){
6. // The dialog box uses window. dialogarguments to obtain the passed parameters.
7. // Obtain the objects and attributes of the parent window
8. Document.forms%0%.txtname.value%%%#dialogarguments.form1.txt name. value;
9. // Obtain the JS variable of the parent window
10. Document.forms%0%.txt age. value = Window. dialogarguments. Age;
11. // Call the parent window method
12. Document.forms%0%.txt say. value = Window. dialogarguments. gethello ();
13. };
14. // --> </MCE: SCRIPT>
15. </Head>
16. <Body>
17. <Form ID = "form1" runat = "server">
18. <Div id = "childdiv" align = "center">
19. </Div>
20. <Br/>
21. <! -- Note: displays the transmitted Element Information on the parent page. -->
22. Name: <input name = "txtname" type = "text" id = "txtname"/> <br/>
23. Age: <input name = "txtage" type = "text" id = "txtage"/> <br/>
24. Greetings: <input name = "txtsay" type = "text" id = "txtsay"/> <br/>
25. <Input type = "button" name = "Submit" value = "close" onclick = "window. Close ()"/>
26. </Form>
27. </Body>
28. </Html>