Js window. showModalDialog and window. open usage example analysis _ javascript skills

Source: Internet
Author: User
This article mainly introduces the js window. showModalDialog and window. the example analyzes window. showModalDialog and window. the definition, function, and usage skills of the open method. if you need it, refer to the example in this article to describe the js window. showModalDialog and window. open usage. Share it with you for your reference. The specific analysis is as follows:

I. Windows. open () support environment:JavaScript1.0 +/JScript1.0 +/Nav2 +/IE3 +/Opera3 +

II. basic syntax:

window.open(pageURL,name,parameters)

Where:

PageURL is the sub-window path
Name is the sub-window handle
Parameters is window parameters (parameters are separated by commas)

III. example:

SCRIPT
 SCRIPT

After running the script, page.html will be opened in the newwindow of the new form, with a width of 100 and a height of 400. it is 0 pixels away from the screen top, 0 pixels left, no tool bar, no menu bar, no scroll bar, and cannot be adjusted, no address bar, no status bar.
Please compare.

In the preceding example, several common parameters are involved. In addition, there are many other parameters. for details, refer to the parameter descriptions described below.


IV. parameters

Here, yes/no can also use 1/0; pixel value is a specific value, in pixels.

Parameters Value range Description
AlwaysLowered Yes/no Specifies that the window is hidden behind all windows
AlwaysRaised Yes/no Specify that the window is suspended above all windows
Depended Yes/no Close at the same time as the parent window
Directories Yes/no Is the directory bar of Nav2 and 3 visible?
Height Pixel value Window height
Hotkeys Yes/no Set the security exit hotkey in the window without 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 Is the position column visible?
Menubar Yes/no Whether the menu bar is visible
OuterHeight Pixel value Set the pixel height of the window (including the decorative border)
OuterWidth Pixel value Set the pixel width of the window (including the decorative border)
Resizable Yes/no Adjustable window size
ScreenX Pixel value Pixel length between the window and the left boundary of the screen
ScreenY Pixel value Pixel length of the window from the upper boundary of the screen
Scrollbars Yes/no Whether the window has a scroll bar
Titlebar Yes/no Is the window question bar visible?
Toolbar Yes/no Whether the window toolbar is visible
Width Pixel value Pixel width of the window
Z-look Yes/no Whether the window floated above other windows after being activated

Window. showModalDialog User Manual

Basic introduction:

ShowModalDialog () (IE 4 + supported)
ShowModelessDialog () (IE 5 + supported)
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 non-modal dialog box that displays HTML content.

Usage:

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

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. the default unit of dialogHeight and dialogWidth in IE4 is em, while that in IE5 is px. for convenience, when defining the modal mode dialog box, unit with px.
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.

Parameter transfer:

1. vArguments is used to pass parameters in the dialog box. The type is not limited. for string types, the maximum value is 4096 characters. Objects can also be passed, 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. dialogArgumentsalert ("The parameter you passed is:" + obj. name) script

2. you can use window. returnValue to return information to the window that opens the dialog box. It 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.jb51.net";《script》

Currency definition

var psAddStr="ProcessID="+ProcessID+"&AddFlag="+isAddFlag+"&BZBH="+vsBZBH+"&BZMC="+vsBZMC+"&BZFH="+vsBZFH+"&JD="+vsJD;  var Result=window.showModalDialog("addSave.asp?"+psAddStr,'',"dialogHeight:250px;dialogWidth:250px;status:no;");

I hope this article will help you design javascript programs.

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.