Today, when I used pop-up child windows in the project, I thought of two methods to implement with JavaScript, one is window.open(); the other is window.showModalDialog() method. The latter is a pop-up window with a parent-child relationship. Only when the child window is closed, the parent window is activated, and parameters and return values can be transferred. Just review the usage again and record the problems encountered during the process.
Basic introduction:
showModalDialog() (IE 4+ support)
showModelessDialog() (IE 5+ support)
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 passed parameter types are not limited, including arrays, etc. The dialog box uses window.dialogArguments to obtain the passed parameters.
sFeatures:
Optional parameter, type: string. Information used to describe the appearance of a dialog box, such as the following information, can be separated by a semicolon ";".
1.dialogHeight: The dialog box height is not less than 100px. The default units of dialogHeight and dialogWidth in IE4 are em, while in IE5 it is px. For the sake of convenience, when defining the dialog box in the modal method, use px as the unit.
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 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 the size can be changed. Default no.
8.status: {yes | no | 1 | 0 } [IE5+]: Whether to display the status bar. Default is yes[Modeless] or no[Modal].
9.scroll:{ yes | no | 1 | 0 | on | off }: Indicates whether the dialog box displays scroll bars. Default is yes.
The following attributes are used in HTA and are generally not used in general web pages.
10.dialogHide:{ yes | no | 1 | 0 | on | off }: Whether the dialog box is hidden when printing or printing preview. Default is no.
11.edge:{ sunken | raised }: Specify the border style of the dialog box. The default is raised.
12.unadorned:{ yes | no | 1 | 0 | on | off }: Default is no.
Parameter passing:
1. If you want to pass parameters in the dialog box, it is passed through vArguments. There is no restriction on type. For string types, the maximum is 4096 characters, and objects can also be passed.
2. You can return information to the window where the dialog box is opened through window.returnValue, and of course it can also be an object.