The javascript techniques of the modal window include passing values, opening, refreshing, and learning related examples. If you are interested, you can refer to the summary of the javascript techniques of the modal window (passing values, opening and refreshing)
1. Ensure thatThere are Otherwise, a new page is displayed when you click the button in the pop-up mode window.
2. Response. Write (new Function (). ClosePage (); statement should be included in the event processing of the button on the pop-up page to close the current modal window.
3. Due to Humorous cache, If you modify data in the modal window, you will find that the data on the parent page is refreshed, but when you click the button again, when the modal window is popped up again, you will find that the content in the modal window is still the content of the previous time. After my experiment, after Manually changing the html code, click the pop-up modal window to bring up the same page, therefore, we need to bypass this mechanism by adding random parameters to the pop-up aspx page. The above modal window code can be changed to the following to avoid this problem:
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;
}
Note that the red parameter is a custom parameter, which should be the only change name in the entire project, it is meaningless (The safest way is to name the change as a name such as lakjsdflawdfqwoifa ).
Basically, when the above conditions are met, the operation of the modal window is relatively simple during page creation.
// Configure //-------------------------------------------------------------------------------------------------------------
Modal window-something that sometimes makes you feel useful
For the use of showModalDialog and showModelessDialog, Windows is used in a B/s structure project. the pop-up window is blocked by some ad blocking tools. You can only use showModalDialog to solve the problem, but the bad method of showModalDialog is that it is too troublesome to pass values between pages (there are two methods to pass values). However, there is no other way to solve this interception problem. Only this is used. The code can be written twice, but a problem is found during code debugging. The content in the window popped up with showModalDialog is always the content displayed when the page is accessed for the first time, at first, we suspect that the page cache is called by the form. Finally, the single-step trace debugging proves that the problem is indeed the page cache read, this shows that when showModalDialog and showModelessDialog are used in asp.net to create a pop-up form, it is best to add
The Code is as follows:
Response. Expires = 0;
Response. Cache. SetNoStore ();
Response. AppendHeader ("Pragma", "no-cache ");
To clear the cache. The showModalDialog Method for Testing with asp, php, js, and vbscript does not need to be cleared. You can use it with confidence. For details about showModalDialog, refer to the details I have found below.
How to Use showModalDialog and showModelessDialog
1. What are the differences between showModalDialog and showModelessDialog?
ShowModalDialog: after being opened, the input focus is always maintained. You cannot switch to the main window unless the dialog box is closed. Similar to the running effect of alert.
ShowModelessDialog: after opening, you can randomly switch the input focus. It has no effect on the main window (it can be blocked at most. : P)
2. How can I leave a new window in the superconnection between showModalDialog and showModelessDialog?
Add You can. This sentence is generally placed inAnd.
3. How can I refresh the content in showModalDialog and showModelessDialog?
In showModalDialog and showModelessDialog, you cannot press F5 to refresh or bring up a menu. This can only rely on javascript. The following is the relevant code:
Reload...
Replace filename.htm with the webpage name and place it in the webpage you opened. Press F5 to refresh the page. Note that this should work If you press F5, a new window will pop up.
Note: If you want to automatically refresh when accessing the service, you can set a record variable on the opened page. When the modal window is opened, the variable ranges from 1 to 1, then use the above method to refresh the modal window. When the window is closed, the variable is 0.
4. How to use javascript to turn off the window opened by showModalDialog (or showModelessDialog.
Must also be used together Otherwise, a new IE window will be opened and closed.
5. Data Transmission skills of showModalDialog and showModelessDialog.
Example:
Now you need to read or set a variable var_name in a showModalDialog (or showModelessDialog ).
General transfer method:
Window. showModalDialog ("filename.htm", var_name)
// Pass the var_name variable
When showModalDialog (or showModelessDialog) is read and set:
Alert (window. dialogArguments) // read the var_name variable
Window. dialogArguments = "oyiboy" // set the var_name variable
This method can be met, but what if you want to operate var_name and then change var_id? You cannot perform the operation again. This is the limitation of this transfer method.
The following is the recommended transfer method:
Window. showModalDialog ("filename.htm", window)
// No matter what variables you want to operate, only the window object of the main window is passed directly.
When showModalDialog (or showModelessDialog) is read and set:
Alert (window. dialogArguments. var_name) // read the var_name variable
Window. dialogArguments. var_name = "oyiboy" // set the var_name variable
You 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
You can also operate any object in the main window, such as the elements in the form object.
Window. dialogArguments. form1.index1. value = "this is the value of the index1 element"
Return Value in the pop-up window: window. returnValue = ...;
6. Multiple showModelessDialog operations.
The main function of the following code is to move another showModelessDialog location in a showModelessDialog.
Some js Code of the main file.
Var s11_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 some code of .htm.
The Code is as follows:
Script
// Operation location data. This special operation function is required because the window location data is in the "xxxpx" mode.
Function countNumber (A_strNumber, A_strWhatdo)
{
A_strNumber = A_strNumber.replace ('px ','')
A_strNumber-= 0
Switch (A_strWhatdo)
{
Case "-": A_strNumber-= 10; break;
Case "+": A_strNumber + = 10; break;
}
Return A_strNumber + "px"
}
Script
The above key parts are:
Window naming method: var s11_showmodelessdialog('control .htm', window, "dialogTop: 1px; dialogLeft: 1px ")
Variable access method: window. dialogArguments. s2.dialogTop
This example is just about the location operation between showModelessDialog and showModelessDialog. Through this principle, the showModelessDialog controls each other's display pages and transmits variables and data. It depends on your efforts.
========================================================== ======================================
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. Specifies 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. The dialog box uses window. dialogArguments to obtain the passed parameters.
SFeatures -- optional parameter; Type: String. Used to describe the appearance and other information of the dialog box. You can use one or more of the following, separated by semicolons.
1. dialogHeight: the dialog box height. The default unit of dialogHeight and dialogWidth in IE4 is em, and that of IE5 is px. To help you see this, when defining the modal mode dialog box, unit with px.
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 value 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 value is yes.
7. resizable: {yes | no | 1 | 0} [IE5 +]: whether the size can be changed. No by default.
8. status: {yes | no | 1 | 0} (IE5 +): whether to display the status bar. The default value is yes [Modeless] or no [Modal].
9. scroll: {yes | no | 1 | 0 | on | off}: Specifies whether the scroll bar is displayed in the dialog box. The default value is yes.
The following attributes are used in HTA and are not used in general web pages.
10. dialogHide: {yes | no | 1 | 0 | on | off}: whether the dialog box is hidden when printing or previewing. The default value is no.
11. edge: {sunken | raised}: Specify the border style of the dialog box. The default value is raised.
12. unadorned: {yes | no | 1 | 0 | on | off}: no by default.
