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="";

function fnCallDialog()
{
showModelessDialog("myDialog.htm",window,"status:false;dialogWidth:300px;dialogHeight:300px");
}

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>

function fnGetInfo()
{
var sData = dialogArguments;
sData.sUserName = oEnterName.value;
sData.fnUpdate();
}

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>