Home > Article > Web Front-end > Detailed explanation of the usage of window.showModalDialog() in JavaScript_javascript skills
Today I used a pop-up child window in the project, and I thought of two methods to implement it in JavaScript. One is window.open(); the other is window.showModalDialog() method. The latter is a method with a parent-child relationship. For pop-up windows, the parent window is activated only when the child window is closed, and parameters and return values can be transferred. I just want to review the usage again and record the problems encountered in the process.
Basic introduction:
showModalDialog() (supported by IE 4)
showModelessDialog() (supported by IE 5)
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.
How to use:
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures],"");
vReturnValue = window.showModelessDialog(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 parameter, 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 parameter, 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: Dialog height, not less than 100px. The default units of dialogHeight and dialogWidth in IE4 are em, while in IE5 it is px. For convenience, when defining a modal 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} [IE5+]: 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 }: Specifies the border style of the dialog box. The default is raised.
12.unadorned:{ yes | no | 1 | 0 | on | off }: The default is no.
Parameter passing:
1. To pass parameters to the dialog box, they are passed through vArguments. There is no limit on the type. For string types, the maximum length is 4096 characters. Objects can also be passed.
2. You can return information to the window that opens the dialog box through window.returnValue, and of course it can also be an object.