JS之open,showModalDialog,showModelessDialog

open:打开新页面

showModalDialog：打开模式对话框

showModelessDialog:打开非模式对话框

open

Syntax:

oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])

 Parameters:

sURL

Optional. String that specifies the URL of the document to display. If no URL is specified, a new window with about:blank is displayed.

sName

Optional. String that specifies the name of the window. This name is used as the value for the TARGET attribute on a form or an a element.

_blank	The sURL is loaded into a new, unnamed window.
_media	The sURL is loaded into the HTML content area of the Media Bar. Available in Internet Explorer 6 or later.
_parent	The sURL is loaded into the current frame's parent. If the frame has no parent, this value acts as the value _self.
_search	Available in Internet Explorer 5 and later. The sURL is opened in the browser's search pane.
_self	The current document is replaced with the specified sURL .
_top	sURL replaces any framesets that may be loaded. If there are no framesets defined, this value acts as the value _self.

sFeatures

Optional. This String parameter is a list of items separated by commas. Each item consists of an option and a value, separated by an equals sign (for example, "fullscreen=yes, toolbar=yes"). The following features are supported.

channelmode = { yes | no | 1 | 0 }	Specifies whether to display the window in theater mode and show the channel band. The default is no.
directories = { yes | no | 1 | 0 }	Specifies whether to add directory buttons. The default is yes.
fullscreen = { yes | no | 1 | 0 }	Specifies whether to display the browser in full-screen mode. The default is no. Use full-screen mode carefully. Because this mode hides the browser's title bar and menus, you should always provide a button or other visual clue to help the user close the window. ALT+F4 closes the new window. A window in full-screen mode must also be in theater mode (channelmode).
height = number	Specifies the height of the window, in pixels. The minimum value is 100.
left = number	Specifies the left position, in pixels. This value is relative to the upper-left corner of the screen. The value must be greater than or equal to 0.
location = { yes | no | 1 | 0 }	Specifies whether to display the input field for entering URLs directly into the browser. The default is yes.
menubar = { yes | no | 1 | 0 }	Specifies whether to display the menu bar. The default is yes.
resizable = { yes | no | 1 | 0 }	Specifies whether to display resize handles at the corners of the window. The default is yes.
scrollbars = { yes | no | 1 | 0 }	Specifies whether to display horizontal and vertical scroll bars. The default is yes.
status = { yes | no | 1 | 0 }	Specifies whether to add a status bar at the bottom of the window. The default is yes.
titlebar = { yes | no | 1 | 0 }	Specifies whether to display a title bar for the window. This parameter is ignored unless the calling application is an HTML Application or a trusted dialog box. The default is yes.
toolbar = { yes | no | 1 | 0 }	Specifies whether to display the browser toolbar, making buttons such as Back, Forward, and Stop available. The default is yes.
top = number	Specifies the top position, in pixels. This value is relative to the upper-left corner of the screen. The value must be greater than or equal to 0.
width = number	Sets the width of the window, in pixels. The minimum value is 100.

bReplace

Optional. When the sURL is loaded into the same window, this Boolean parameter specifies whether the sURL creates a new entry or replaces the current entry in the window's history list.

true	sURL replaces the current document in the history list
false	sURL creates a new entry in the history list.

Example:

window.open("Sample.htm",null,"height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");

showModalDialog

Syntax:

vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])

Parameters:

sURL

Required. String that specifies the URL of the document to load and display.

vArguments

Optional. Variant that specifies the arguments to use when displaying the document. Use this parameter to pass a value of any type, including an array of values. The dialog box can extract the values passed by the caller from the dialogArguments property of the window object.

sFeatures

Optional. String that specifies the window ornaments for the dialog box, using one or more of the following semicolon-delimited values:

dialogHeight:sHeight	Sets the height of the dialog window (see Remarks for default unit of measure).
dialogLeft:sXPos	Sets the left position of the dialog window relative to the upper-left corner of the desktop.
dialogTop:sYPos	Sets the top position of the dialog window relative to the upper-left corner of the desktop.
dialogWidth:sWidth	Sets the width of the dialog window (see Remarks for default unit of measure).
center:{ yes | no | 1 | 0 | on | off }	Specifies whether to center the dialog window within the desktop. The default is yes.
dialogHide:{ yes | no | 1 | 0 | on | off }	Specifies whether the dialog window is hidden when printing or using print preview. This feature is only available when a dialog box is opened from a trusted application. The default is no.
edge:{ sunken | raised }	Specifies the edge style of the dialog window. The default is raised.
help:{ yes | no | 1 | 0 | on | off }	Specifies whether the dialog window displays the context-sensitive Help icon. The default is yes.
resizable:{ yes | no | 1 | 0 | on | off }	Specifies whether the dialog window has fixed dimensions. The default is no.
scroll:{ yes | no | 1 | 0 | on | off }	Specifies whether the dialog window displays scrollbars. The default is yes.
status:{ yes | no | 1 | 0 | on | off }	Specifies whether the dialog window displays a status bar. The default is yes for untrusted dialog windows and no for trusted dialog windows.
unadorned:{ yes | no | 1 | 0 | on | off }	Specifies whether the dialog window displays the border window chrome. This feature is only available when a dialog box is opened from a trusted application. The default is no.

Example:

 

<SCRIPT>
function fnRandom(iModifier){
return parseInt(Math.random()*iModifier);
}
function fnSetValues(){
var iHeight=oForm.oHeight.options[
oForm.oHeight.selectedIndex].text;
if(iHeight.indexOf("Random")>-1){
iHeight=fnRandom(document.body.clientHeight);
}
var sFeatures="dialogHeight: " + iHeight + "px;";
return sFeatures;
}
function fnOpen(){
var sFeatures=fnSetValues();
window.showModalDialog("showModalDialog_target.htm", "",
sFeatures)
}
</SCRIPT>
<FORM NAME=oForm>
Dialog Height <SELECT NAME="oHeight">
<OPTION>-- Random --
<OPTION>150
<OPTION>200
<OPTION>250
<OPTION>300
</SELECT>
Create Modal Dialog Box
<INPUT TYPE="button" VALUE="Push To Create"
onclick="fnOpen()">
</FORM>

showModelessDialog

Syntax:

vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])

Parameters:

sURL
Required. String that specifies the URL of the document to load and display.
vArguments
Optional. Variant that specifies the arguments to use when displaying the document. Use this parameter to pass a value of any type, including an array of values. The dialog box can extract the values passed by the caller from the dialogArguments property of the window object.
sFeatures
Optional. Variant of type String that specifies the window ornaments for the dialog box, using one or more of the following semicolon-delimited values: 
dialogHeight:sHeight
Sets the height of the dialog window (see Remarks for default unit of measure).
dialogLeft:sXPos
Sets the left position of the dialog window relative to the upper-left corner of the desktop.
dialogTop:sYPos
Sets the top position of the dialog window relative to the upper-left corner of the desktop.
dialogWidth:sWidth
Sets the width of the dialog window (see Remarks for default unit of measure).
center:{ yes | no | 1 | 0 | on | off }
Specifies whether to center the dialog window within the desktop. The default is yes.
dialogHide:{ yes | no | 1 | 0 | on | off }
Specifies whether the dialog window is hidden when printing or using print preview. This feature is only available when a dialog box is opened from a trusted application. The default is no.
edge:{ sunken | raised }
Specifies the edge style of the dialog window. The default is raised.
help:{ yes | no | 1 | 0 | on | off }
Specifies whether the dialog window displays the context-sensitive Help icon. The default is yes.
resizable:{ yes | no | 1 | 0 | on | off }
Specifies whether the dialog window has fixed dimensions. The default is no.
scroll:{ yes | no | 1 | 0 | on | off }
Specifies whether the dialog window displays scrollbars. The default is yes.
status:{ yes | no | 1 | 0 | on | off }
Specifies whether the dialog window displays a status bar. The default is yes for untrusted dialog windows and no for trusted dialog windows.
unadorned:{ yes | no | 1 | 0 | on | off }
Specifies whether the dialog window displays the border window chrome. This feature is only available when a dialog box is opened from a trusted application. The default is no.

Example1:

 

<HEAD>
<HTML>
<HEAD>
<TITLE>showModelessDialogEX.htm</TITLE>
<SCRIPT>
var sUserName="";
/*------------------------------------------------------------
Supplying the window object as a parameter allows for declaring the global
variable, sUserName, and using it to return information from the modeless
dialog box.
------------------------------------------------------------- */
function fnCallDialog()
{
showModelessDialog("myDialog.htm",window,"status:false;dialogWidth:300px;dialogHeight:300px");
}
/*-------------------------------------------------------------
The fnUpdate function takes the value passed into sUserName in myDialog.htm
to update the span text on this page. This function is called in both
fnGetInfo and fnCancel functions in myDialog.htm.
-------------------------------------------------------------*/
function fnUpdate()
{
oName.innerText = sUserName;
}
</SCRIPT>
</HEAD>
<BODY>
<P>Enter your first name: <SPAN ID="oName"
STYLE="color:red;font-size:24">Joan</SPAN></P> <INPUT TYPE="button"
VALUE="Display Modeless Dialog" onclick="fnCallDialog()">
</BODY>
</HTML>
Example2:

<HTML>
<HEAD>
<TITLE>myDialog.htm</TITLE>
<SCRIPT>
/* -------------------------------------------------------------
This function makes use of the dialogArguments property of the
window object. dialogArguments allows the global variable sUserName
to feed the value supplied to the input in this dialog box back to
the window that called it.
---------------------------------------------------------------- */
function fnGetInfo()
{
var sData = dialogArguments;
sData.sUserName = oEnterName.value;
sData.fnUpdate();
}
/* -------------------------------------------------------------
This function cleans up in case the user has clicked the
Apply button before canceling.
---------------------------------------------------------------- */
function fnCancel()
{
var sData = dialogArguments;
sData.sUserName = "Joan";
sData.fnUpdate();
}
</SCRIPT>
</HEAD>
<BODY>
<LABEL FOR="oEnterName" ACCESSKEY="f">Enter your
<SPAN STYLE="text-decoration:underline">F</SPAN>irst Name</LABEL>
<INPUT ID=oEnterName><BR><BR>
<INPUT VALUE="Apply" TYPE=button onclick="fnGetInfo();">
<INPUT VALUE="Ok" TYPE=button onclick="fnGetInfo();window.close();">
<INPUT VALUE="Cancel" TYPE=button onclick="fnCancel();window.close();">
</BODY>
</HTML>