Home  >  Article  >  Web Front-end  >  Detailed explanation of js showModalDialog pop-up window example_javascript skills

Detailed explanation of js showModalDialog pop-up window example_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:05:011009browse

showModalDialog:Modal window is a very special kind of window. When it is opened, the activities of the following parent window will stop unless the current modal child window is closed. In order to operate the parent window. When doing web Ajax development, we should sometimes use it to fill in forms, or create a window similar to online question answering. Its characteristic is that it is very convenient and powerful to pass parameters, and the parent can be called directly Window variables and methods.

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

Parameter description:
sURL--
Required parameter, type: string. Used to specify the URL of the document to be displayed in the dialog box.

vArguments--
Optional parameters, type: variant. Used to pass parameters to the dialog box. The type of parameters passed is not limited, including arrays, etc. The dialog box obtains the parameters passed in through window.dialogArguments.

sFeatures--
Optional parameters, type: string. Used to describe the appearance of the dialog box and other information, you can use one or more of the following, separated by semicolons ";".

1.dialogHeight:
The height of the dialog box, not less than 100px. The default unit of dialogHeight and dialogWidth in IE4 is em, while in IE5 it is px. For convenience, the modal mode is defined When opening a dialog box, use px as the unit.

2.dialogWidth:
Dialog width.

3.dialogLeft:
Distance from the left side of the screen.

4.dialogTop:
Distance from the screen.

5.center: {yes | no | 1 | 0}:
Whether the window is centered, the default 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 is yes.

7.resizable: {yes | no | 1 | 0}
[IEE5+]: Whether it can be resized. The default is no.

8.status: {yes | no | 1 | 0}
[IE5]: Whether to display the status bar. Default is yes[Modal] 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 HTA and are generally not used in ordinary web pages.

10.dialogHide:{ yes | no | 1 | 0 | on | off }:
Whether the dialog box is hidden during printing or print preview. The default is no.

11.edge:{ sunken | raised }:
Indicates the border style of the dialog box. The default is raised.

12.unadorned:{ yes | no | 1 | 0 | on | off }:
Default is no.

FOR example:
parent.html

Copy code The code is as follows:

<script><br>function setname(res){<br>document.getElementByIdx_x("name").value=res;<br>}<br>function selectTp (){<br> // Pass the setname function of the parent window to the child window window.showModalDialog('child.html',setname,'dialogWitdh:300px;dialogHeight:300px;center:yes;');<br>} <br></script>

child.html



Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn