Summary of JS modal dialog box and non-modal dialog box operation skills_Basic knowledge

Summary of modal window JavaScript skills (passing value, opening, refreshing)
1. In the page to be popped up, be sure to have between the tags , otherwise the modal window will pop up, and when the button is clicked, a new page will pop up again.
2. In the event processing of the button that pops up the page, there should be a Response.Write(new Function().ClosePage()); statement to close the current modal window.
3. Due to humorous caching reasons, if you modify the data in the modal window, you will find that the data on the parent page is refreshed, but when you click the button again and the modal window pops up again, you will I found that the content in the modal window is still the same as last time. After my experiment, after manually changing the html code, clicking on the pop-up modal window still pops up the same page. Therefore, this mechanism needs to be bypassed here by popping up the modal window. Add random parameters after the aspx page. The above modal window code can be changed as follows to avoid this problem:

Copy the code The code is as follows:

public string ModalWindow(string openAspxPage,int width,int height)
{
string js = string.Format("javascript:window.showModalDialog("{0}&rand=" new Random().Next ().ToString() "",window,"status:false;dialogWidth:{1}px;dialogHeight:{2}px")",openAspxPage,width,height);
return js;
}

Please note that some parameters in red are customized parameters. This parameter should be the only change name in the entire project and is meaningless (the safest way is to name this change something like lakjsdflawdfqwoifa name).
Basically, if the above conditions are met, it is relatively simple to operate the modal window when creating a page.
//--------------------------------------------- -------------------------------------------------- ----------------
Modal window - something that sometimes makes you feel very useful
About the use of showModalDialog and showModelessDialog, a b/s structure project The window that pops up using window.open is blocked by some ad blocking tools. I have no choice but to use showModalDialog to solve the problem. However, the disadvantage of showModalDialog is that it is too troublesome to transfer values ​​between pages (there are two ways to transfer values). , but there is really no other way to solve this interception problem, the only way is to use this. The code was written in just two strokes, but a problem was discovered when debugging the code. The content in the window that popped up using showModalDialog was always the content displayed when the page was accessed for the first time. From the beginning, I suspected that it was the page cache called by the form. Finally, single-step tracing and debugging also proved that the problem is indeed the read page cache. This shows that when using showModalDialog and showModelessDialog to create pop-up forms in asp.net, it is best to add

Copy code The code is as follows:

Response.Expires = 0;
Response.Cache.SetNoStore();
Response.AppendHeader("Pragma", "no-cache");


to clear cache. Use asp, php, js, vbscript to test the showModalDialog method and there is no need to clear the cache. You can use it with confidence. Regarding showModalDialog, you can refer to the detailed introduction I found below
Using experience of showModalDialog and showModelessDialog
1. What is the difference between showModalDialog and showModelessDialog?
ShowModalDialog: After being opened, the input focus will always be maintained. The user cannot switch to the main window unless the dialog box is closed. Similar to the operation effect of alert.
ShowModelessDialog: After being opened, the user can randomly switch the input focus. It has no effect on the main window (at most it is blocked for a while. :P)
2. How to prevent the hyperlinks in showModalDialog and showModelessDialog from popping up new windows?
Just add to the opened web page. This sentence is usually placed between and .
3. How to refresh the content in showModalDialog and showModelessDialog?
In showModalDialog and showModelessDialog, you cannot press F5 to refresh, and the menu cannot pop up. This can only rely on javascript. The following is the relevant code:

reload...
Replace filename.htm with the name of the web page and put it into the web page you open, press F5 can be refreshed. Note that this must be used in conjunction with , otherwise a new window will pop up when you press F5.
Note: If you want to automatically refresh when accessing, you can set a record variable on the opened page. When the modal window is opened, the variable will be set to 1, and then use the above method to refresh the modal window. When it is closed, When the window opens, the variable reaches 0.
4. How to use javascript to close the window opened by showModalDialog (or showModelessDialog).
　
　Also cooperate with , otherwise a new one will be opened IE window and then close it.
5. Data transfer skills of showModalDialog and showModelessDialog.
Example:
Now you need to read or set a variable var_name in a showModalDialog (or showModelessDialog)
General delivery method:
window.showModalDialog("filename.htm",var_name)
// Pass the var_name variable
When reading and setting in showModalDialog (or showModelessDialog):
alert(window.dialogArguments) // Read the var_name variable
window.dialogArguments="oyiboy" // Set var_name Variable
This method is satisfactory, but what if you want to operate the second variable var_id while operating var_name? It can no longer be operated. This is the limitation of this delivery method.
　　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　cess forward forwardure-ure | 🎜> When reading and setting showModalDialog (or showModelessDialog):
alert(window.dialogArguments.var_name) //Read the var_name variable
window.dialogArguments.var_name="oyiboy" //Set the var_name variable
At the same time, I can also operate the var_id variable
　　alert(window.dialogArguments.var_id)//Read the var_id variable
　　　Window.dialogArguments.var_id="001"//Set the var_id variable
　　　　Operate on any object in the window, such as elements in the form object.
window.dialogArguments.form1.index1.value="This is setting the value of the index1 element"
Return value in the pop-up window: window.returnValue = ...;
6. Multiple showModelessDialog interoperate.
The main function of the following code is to move the position of another showModelessDialog within a showModelessDialog.
Part of the js code of the main file.
var s1=showModelessDialog('control.htm',window,"dialogTop:1px;dialogLeft:1px") //Open the control window
var s2=showModelessDialog('about:blank',window,"dialogTop: 200px;dialogLeft:300px") //Open the controlled window
Control part of the .htm code.

Copy code The code is as follows:

　<script> <br>　　 //Operate position data, because the position data of the window is in "xxxpx" mode, so such a special operation function is needed. <br>function countNumber(A_strNumber,A_strWhatdo) <br>{ <br>A_strNumber=A_strNumber.replace('px','') <br>A_strNumber-=0 <br>switch(A_strWhatdo) <br>{ <br>case "-":A_strNumber-=10;break; <br>case " ":A_strNumber =10;break; <br>} <br>return A_strNumber "px" <br>} <br>　</script>
　
　< input type="button" onclick="window.dialogArguments.s2.dialogLeft=countNumber(window.dialogArguments.s2.dialogLeft,'-')" value="Shift left">
　
　

The key parts above are:
Window naming method: var s1=showModelessDialog('control.htm',window,"dialogTop:1px;dialogLeft:1px")
Variable access method: window.dialogArguments.s2.dialogTop
This example is only the difference between showModelessDialog and showModelessDialog The position operation function uses this principle to control each other's display pages between showModelessDialogs, transfer variables and data, etc. This depends on your performance.
================================================== =====================
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. 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 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 IE5 and above are px. For convenience, when defining modal dialog boxes, 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.