Let's briefly introduce the basics:
First, window.open () Support environment: java1.0+/j1.0+/nav2+/ie3+/opera3+
Second, the basic grammar:
window.open (Pageurl,name,parameters)
which
Pageurl as a child window path
Name is a child window handle
Parameters for window parameters (comma-separated arguments)
Third, the parameters
Where yes/no can also use 1/0;pixel value as the specific value, the unit pixel.
Parameters | Value Range | Description
alwayslowered | yes/no | Specifies that the window is hidden behind all windows
alwaysraised | yes/no | Specifies that the window is suspended above all windows
depended | yes/no | Whether to close the parent window at the same time
Directories | yes/no | Whether the NAV2 and 3 columns are visible
Height | Pixel value | Window height
hotkeys | yes/no | Set up a secure exit hotkey in a window without a menu bar
Innerheight | Pixel value | Pixel height of the document in the window
Innerwidth | Pixel value | Pixel width of the document in the window
Location | yes/no | Whether the position bar is visible
MenuBar | yes/no | Whether the menu bar is visible
Outerheight | Pixel value | Set the pixel height of a window (including a decorative border)
Outerwidth | Pixel value | Set the pixel width of a window (including a decorative border)
resizable | yes/no | Whether the window size can be adjusted
ScreenX | Pixel value | The pixel length of the window from the left edge of the screen
ScreenY | Pixel value | The pixel length of the window from the edge of the screen
ScrollBars | yes/no | Whether a window can have a scroll bar
TitleBar | yes/no | Whether the window topic bar is visible
Toolbar | yes/no | Whether the window toolbar is visible
Width | Pixel value | The pixel width of the window
Z-look | yes/no | Whether the window floats on top of other windows when it is activated
window.showModalDialog Use manual
Basic Introduction:
ShowModalDialog () (IE 4+ support)
showModelessDialog () (IE 5+ support)
The window.showModalDialog () method is used to create a modal dialog box that displays HTML content.
The Window.showmodelessdialog () method is used to create a modeless dialog box that displays HTML content.
How to use:
Vreturnvalue = window.showModalDialog (sURL [, varguments] [, Sfeatures])
Vreturnvalue = Window.showmodelessdialog (sURL [, varguments] [, Sfeatures])
Parameter description:
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.
1.dialogHeight: Dialog height, not less than 100px,ie4 dialogheight and dialogwidth 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+]: Whether the status bar is displayed. 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 attributes 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
Copy Code code as follows:
<script type= "Text/javascript" >
var obj = new Object ();
Obj.name= "51js";
window.showModalDialog ("modal.htm", obj, "dialogwidth=200px;dialogheight=100px");
</script>
Modal.htm
Copy Code code as follows:
<script type= "Text/javascript" >
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
Copy Code code as follows:
< type= "Text/java" >
Str =window.showmodaldialog ("modal.htm", "dialogwidth=200px;dialogheight=100px");
alert (str);
</script>
Modal.htm
Copy Code code as follows:
<script type= "Text/javascript" >
Window.returnvalue= "Http://www.jb51.net";
</script>
In IE, we can use ShowModalDialog to pass the value.
The syntax is as follows:
Vreturnvalue = window.showModalDialog (sURL [, varguments] [, Sfeatures])
But there is no ShowModalDialog method in Firefox, but we can use window.open ()
The syntax is as follows:
Onewwindow = window.open ([sURL] [, sname] [, Sfeatures] [, Breplace])
Just, in Firefox, window.open parameters, sfeature more functions set, and in Firefox to let open windows and IE ShowModalDialog, as long as in sfeatures add a modal= Yes is OK.
Here is an example to illustrate its usage.
Function Description: Enter the color type from the child window submit to the parent window and add options to the Drop-down list.
A.html
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>a.html Documents </title>
<script language= "JavaScript" >
function Openstr ()
{
Returnvalue=window.showmodaldialog ("b.html", Window, "Dialogwidth=510px;dialogheight=150px;status=no");
if (returnvalue && returnvalue!= "")
{
Ooption = document.createelement (' OPTION ');
Ooption.text=returnvalue;
Ooption.value=returnvalue;
Document.all.txtselect.add (ooption);
}
}
</script>
<body>
<form id= "Form1" Name= "Form1" method= "Post" action= "" >
<label>
<select name= "Txtselect" id= "Txtselect" >
</select>
</label>
<label>
<input type= "button" Name= "Submit" value= "open child window" onclick= "Openstr ()"/>
</label>
</form>
</body>
B.html
Copy Code code as follows:
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>b.html Documents </title>
<script language= "JavaScript" >
function clickOK ()
{
var t=document. Edit;
var Url=t.color.value;
if (url==null| | url== "Fill in Color") return (false);
Window.returnvalue=url;
Window.close ();
}
</script>
<body>
<table border= "0" cellpadding= "0" cellspacing= "2" align= "center" width= ">"
<form name= "edit" id= "edit" >
<tr>
<TD width= "align=" "Right" height= ">color:</td>"
<TD height= "><input" type= "text" name= "color" value= "Fill Color"/></td>
<TD width= "align=" center "height=" ><input "type=" button "Name=" Bntok "value=" Confirm "onclick=" clickOK (); " /> </td>
</tr>
</form>
</table>
</body>
The Code modified to be compatible with IE and FIREFOXR is as follows:
[Code]
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>a.html Documents </title>
<script type= "Text/javascript" >
function Openstr ()
{
window.open ("b.html", "" "," Modal=yes,width=500,height=500,resizable=no,scrollbars=no ");
}
</script>
<body>
<form id= "Form1" Name= "Form1" method= "Post" action= "" >
<label>
<select name= "Txtselect" id= "Txtselect" >
</select>
</label>
<label>
<input type= "button" Name= "Submit" value= "open child window" onclick= "Openstr ()"/>
</label>
</form>
</body>
B.html
Copy Code code as follows:
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>b.html Documents </title>
<script type= "Text/javascript" >
function clickOK ()
{
var t=document. Edit;
var Color=t.color.value;
if (color==null| | color== "Fill in Color") return (false);
var ooption = window.opener.document.createElement (' OPTION ');
Ooption.text=url;
Ooption.value=url;
Check browser type
var bname = navigator.appname;
if (Bname.search (/netscape/i) = = 0)
{
Window.opener.document.getElementById ("Txtselect"). AppendChild (ooption);
}
else if (bname.search (/microsoft/i) = = 0)
{
Window.opener.document.all.txtselect.add (ooption);
}
Else
{
}
Window.close ();
}
</script>
<body>
<table border= "0" cellpadding= "0" cellspacing= "2" align= "center" width= ">"
<form name= "edit" id= "edit" >
<tr>
<TD width= "align=" "Right" height= ">color:</td>"
<TD height= "><input" type= "text" name= "color" value= "Fill Color"/></td>
<TD width= "align=" center "height=" ><input "type=" button "Name=" Bntok "value=" Confirm "onclick=" clickOK (); " /> </td>
</tr>
</form>
</table>
</body>
Current 1/2 page
12 Next read the full text
