Introduction to the use of js modal windows (modal dialog boxes and non-modal dialog boxes)_Basic knowledge

Javascript is divided into modal dialog boxes and non-mode dialog boxes. In fact, the difference between the two is whether the user can work elsewhere on the same page before the dialog box is closed. For example, the "Open File" dialog box is a typical modal dialog box. Only when you take action on this dialog box can you perform other operations on the program that opens the dialog box. This is not necessary for non-modal dialog boxes.

Modal dialog: showModalDialog
Modeless dialog: showModelessDialog

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

Return value: vReturnValue, of course the return value is returned from the dialog box;
sURL: required, the page you want to open;

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: 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, when defining a modal dialog box, use px as the unit.
2.dialogWidth: dialog box 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, 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.dialogArguments 
alert("您传递的参数为：" + obj.name) 
</script>

-------------------------------
2. You can return information to the window that opened the dialog box through window.returnValue, and of course 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.51js.com"; 
</script>

After using window.showModalDialog or window.showModelessDialog to open a modal window, there are some interaction issues with the parent window.
The prerequisite for interactive operations is that when calling the showModalDialog or showModelessDialog method, the second parameter is passed to window, such as:
window.showModelessDialog('filename.htm',window,'dialogWidth=200px;dialogHeight=250px;')
Next, it is to obtain some data and methods of the parent window, which is often used. The parent window can usually obtain the parameters of the child window through returnValue

//取得父窗口的JS变量 var 
window.dialogArguments.var; 
//获得父窗口的对象和属性 
window.dialogArguments.form1.name.value ; 
//调用父窗口的方法 fun
window.dialogArguments.fun() ;