JS modal dialog box and modeless dialog box Operation Skills Summary _ Basic knowledge

Source: Internet
Author: User
Modal window JavaScript Tips Summary (value, open, refresh)
1, to eject the page, we must ensure that 2, the pop-up page of the button event processing, there should be Response.Write (new Function (). Closepage ()); statement to close the current modal window.
3. Because of the reason for the caching of humor, 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 pop the modal window again, you will find that the content in the modal window is the last one, and after I have experimented with the HTML code manually, Clicking on the pop-up modal window still pops up the same page, so here's a way to get around this mechanism by adding random parameters to the ASPX page that pops up. The above modal window code can be changed as follows to avoid this problem:
Copy Code code 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 the Red Word part parameter, which is a custom parameter that should be the only change name in the entire project, and meaningless (the most secure way is to name the change as Lakjsdflawdfqwoifa).
Basically, to meet the above conditions, when the page is to operate modal window, relatively simple.
//-------------------------------------------------------------------------------------------------------------
Modal window--a thing that sometimes makes you feel good
On the use of ShowModalDialog and showModelessDialog, a B/ s structure of the project with window.open pop-up window by some advertising interception tool to intercept, no way can only use ShowModalDialog to solve the problem, but showmodaldialog this method is bad is the page transfer value too troublesome (the value of two methods), But there is no other way to solve this interception problem, only use this. The code is written in two. But when debugging code to find a problem, with ShowModalDialog pop-up window content is the first time to access the content of the page, the beginning of the suspect is the form call page cache, and finally through the single step tracking debugging also proved that the problem is indeed read page cache , which shows that using ShowModalDialog and showModelessDialog as pop-up forms in asp.net is best done with the Page_Load event plus
Copy Code code as follows:

Response.Expires = 0;
Response.Cache.SetNoStore ();
Response.appendheader ("Pragma", "No-cache");

To clear the cache. The use of Asp,php,js,vbscript test using the ShowModalDialog method does not appear to need to clear the cache, you can rest assured that the use of the ShowModalDialog when you can see the following I found a detailed introduction
ShowModalDialog and showModelessDialog use experience
What's the difference between ShowModalDialog and showModelessDialog?
ShowModalDialog: The input focus is always maintained when it is opened. The user cannot switch to the main window unless the dialog box is closed. Similar to the running effect of alert.
showModelessDialog: After being opened, the user can randomly switch the input focus. Has no effect on the main window (at most, it is blocked.) :P)
Second, how to let the ShowModalDialog and showmodelessdialog hyperlinks do not eject a new window?
Add <base target= "_self" to the Web page you've opened. > This sentence is usually placed between Third, how to refresh the contents of ShowModalDialog and showModelessDialog?
In ShowModalDialog and showModelessDialog can not press F5 refresh, and can not pop-up menu. This can only depend on JavaScript, and here's the relevant code:
<body onkeydown= "if (event.keycode==116) {Reload.click ()}" >
<a id= "Reload" href= "filename.htm" style= "Display:none" >reload...</a>
Replace the filename.htm with the name of the Web page and put it on your open Web page, press F5 to refresh, note that this should be matched <base target= "_self" > Use, or you press the F5 will pop up a new window.
Note: If you want to automatically refresh when you visit, you can set a record variable on the page being opened, when the modal window is opened, the variable to 1, and then use the method to refresh the modal window, when the window is closed, the variable to 0.
How to use JavaScript to turn off ShowModalDialog (or showmodelessdialog) open windows.
<input type= "button" value= "Close" onclick= "Window.close ()" >
Also need to cooperate with <base target= "_self", otherwise will open a new IE window, and then turn off.
V. ShowModalDialog and showModelessDialog data transfer skills.
Example:
Now you need to read or set a variable in a showmodaldialog (or showModelessDialog) var_name
General mode of delivery:
window.showModalDialog ("filename.htm", Var_name)
Passing Var_name variables
When ShowModalDialog (or showModelessDialog) reads and sets:
Alert (window.dialogarguments)//Read Var_name variable
window.dialogarguments= "Oyiboy"//Set var_name variable
This is a way to be satisfied, but when you want to operate var_name and then manipulate the second var_id? can no longer operate. This is the limitation of this way of passing.
    
The following are the delivery methods I recommend:
window.showModalDialog ("filename.htm", window)
Just pass the window object of the main window straight, regardless of the variable you want to manipulate
When ShowModalDialog (or showModelessDialog) reads and sets:
Alert (Window.dialogArguments.var_name)//Read Var_name variable
Window.dialogarguments.var_name= "Oyiboy"//Set var_name variable
And I can also manipulate var_id variables.
Alert (WINDOW.DIALOGARGUMENTS.VAR_ID)//Read var_id variable
Window.dialogarguments.var_id= "001"//Set var_id variable
You can also manipulate any object in the main window, such as an element in a Form object.
Window.dialogarguments.form1.index1.value= "This is the value of setting the INDEX1 element"
Return value in pop-up window: Window.returnvalue = ...;
Six, multiple showmodelessdialog of mutual operation.
The main function of the following code is to move a showmodelessdialog position in a showmodelessdialog.
Part of the main file JS code.
var s1=showmodelessdialog (' control. htm ', window, ' dialogtop:1px;dialogleft:1px ')//Open Control window
var s2=showmodelessdialog (' About:blank ', window, "dialogtop:200px;dialogleft:300px")//Open controlled window
A partial code that controls. htm.
Copy Code code as follows:

<script>
The operation position data, because the window position data is "xxxpx" the way, therefore needs such a special operation function.
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>
<input type= "button" onclick= "Window.dialogarguments.s2.dialogtop=countnumber" ( Window.dialogArguments.s2.dialogTop, '-') ' value= ' Move Up >
<input type= "button" onclick= "Window.dialogarguments.s2.dialogleft=countnumber" ( Window.dialogArguments.s2.dialogLeft, '-') "value=" left >
<input type= "button" onclick= "Window.dialogarguments.s2.dialogleft=countnumber" ( Window.dialogArguments.s2.dialogLeft, ' + ') ' value= ' Move right >
<input type= "button" onclick= "Window.dialogarguments.s2.dialogtop=countnumber" ( Window.dialogArguments.s2.dialogTop, ' + ') ' value= Move Down >

The above key parts are:
Window naming mode: var s1=showmodelessdialog (' control. htm ', window, "dialogtop:1px;dialogleft:1px")
Variable access mode: Window.dialogArguments.s2.dialogTop
This example is only the reality of the position between showModelessDialog and showModelessDialog function, through this principle, in showModelessDialog control each other's display page, transfer variables and data. It depends on how you play.
====================================================================
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 modeless 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. The URL used to specify the document to display in the dialog box.
varguments--optional parameter, type: Variant. Used to pass parameters to the dialog box. The parameter types passed are not limited, including arrays, and so on. The dialog box is window.dialogarguments to get the parameters passed in.
sfeatures--optional parameter, type: String. Used to describe information such as the appearance of a dialog box, you can use one or more of the following, with a semicolon ";" Separated.
1.dialogHeight: Dialog height, not less than 100px,ie4 dialogheight and dialogwidth default unit is EM, and IE5 above is PX, in order to facilitate its see, in the Definition of modal dialog box, with PX to do units.
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}: The window is centered, the default yes, but the height and width can still be specified.
6.help: {yes | no | 1 | 0}: Show Help button, default yes.
7.resizable: {yes | no | 1 | 0}(ie5+): can be changed size. Default No.
8.status: {yes | no | 1 | 0}(ie5+): Show 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. The default is yes.
The following attributes are used in an HTA and are generally not used in general Web pages.
10.dialoghide:{Yes | no | 1 | 0 | on | off}: Dialog box is hidden when printing or printing preview. The default is No.
11.edge:{Sunken | raised}: Indicates the border style of the dialog box. Default is raised.
12.unadorned:{Yes | no | 1 | 0 | on | off}: default is No.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.