Home > Developer > JavaScript
1. Standard Method
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Function openWin (src, width, height, showScroll ){
Window. showModalDialog (src, "", "location: No; status: No; help: No; dialogWidth:" + width + "; dialogHeight:" + height + "; scroll: "+ showScroll + ";");
}
</Script>
Example: <span style = "CURSOR: pointer" onclick = "openWin 'HTTP: // www.jb51.net ', '500p', '400p', 'no ') "> click </span>
2. It should be noted that Firefox does not support this function. The syntax it supports is
Copy codeThe Code is as follows:
Window. open
('Openwin.html ', 'newwin', 'modal = yes, width = 200, height = 200, resizable = no, scrollbars = no ');
3. How to automatically determine the browser
Copy codeThe Code is as follows:
<Input type = "button" value = "Open dialog box" onclick = "showDialog ('#')"/>
<Script language = "JavaScript">
<! --
Function showDialog (url)
{
If (document. all) // IE
{
Feature = "dialogWidth: 300px; dialogHeight: 200px; status: no; help: no ";
Window. showModalDialog (url, null, feature );
}
Else
{
// ModelessDialog can replace modal with dialog = yes
Feature = "width = 300, height = 200, menubar = no, toolbar = no, location = no ,";
Feature + = "scrollbars = no, status = no, modal = yes ";
Window. open (url, null, feature );
}
}
// -->
</SCRIPT>
4. in IE, the address bar is hidden in the modal dialog box, but not necessarily in other browsers.
[Note] in Google browser, the effect of this mode will also become invalid.
5. In the pop-up dialog box, we usually want the background of the entire parent page to become a translucent color, so that users can see that the background is not accessible.
After closing the dialog box, you want to restore it again.
How is this done?
Copy codeThe Code is as follows:
/// Display the details of an order. A modal dialog box is used to change the screen color.
Function ShowOrderDetails (orderId ){
Var url = "details. aspx? OrderID = "+ orderId;
// $ ("Body" 2.16.css ("filter", "Alpha (Opacity = 20 )");
// Filter: Alpha (Opacity = 50)
$ ("Body"). addClass ("body1 ");
ShowDetailsDialog (url, "600px", "400px", "yes ");
$ ("Body"). removeClass ("body1 ");
}
In addition, there is a style sheet Definition
Copy codeThe Code is as follows:
. Body1
{
Background-color: #999999;
Filter: Alpha (Opacity = 40 );
}
6. How to pass a value between pages
ShowModalDialog value transfer and refresh
(1) showModalDialog example: the parent window transfers a value to the Child window, the Child Window sets the value of the parent window, And the return value is returned to the parent window when the child window is closed.
Farther.html
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META content = "EditPlus" name = "Generator">
<META content = "" name = "Author">
<META content = "" name = "Keywords">
<META content = "" name = "Description">
<Script language = "javascript">
<! --
Function openChild (){
Var k = window. showModalDialog ("child.html", window, "dialogWidth: 335px; status: no; dialogHeight: 300px ");
If (k! = Null)
Document. getElementById ("txt11"). value = k;
}
// -->
</Script>
</HEAD>
<BODY>
<FONT face = ""> </FONT>
<Br>
Value passed to the parent window: <input id = "txt9" type = "text" value = "3333333333333" name = "txt9"> <br>
Returned value: <input id = "txt11" type = "text" name = "txt11"> <br>
Value set in the subwindow: <input id = "txt10" type = "text" name = "txt10"> <br>
<Input id = "Button1" onclick = "openChild ()" type = "button" value = "openChild" name = "Button1">
</BODY>
</HTML>
Child.html
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META content = "EditPlus" name = "Generator">
<META content = "" name = "Author">
<META content = "" name = "Keywords">
<META content = "" name = "Description">
<Meta http-equiv = "Expires" content = "0">
<Meta http-equiv = "Cache-Control" content = "no-cache">
<Meta http-equiv = "Pragma" content = "no-cache">
</HEAD>
<BODY>
<FONT face = ""> </FONT>
<Br>
Value passed by the parent window: <input id = "txt0" type = "text" name = "txt0"> <br>
Enter the value of the parent window to be set: <input id = "txt1" type = "text" name = "txt1"> <input id = "Button1" onclick = "setFather () "type =" button "value =" set the value of the parent window "name =" Button1 "> <br>
Value returned by the input: <input id = "txt2" type = "text" name = "txt2"> <input id = "Button2" onclick = "retrunValue () "type =" button "value =" close cut return value "name =" Button2 ">
<Input id = "Button3" onclick = "" type = "button" value = "Close refresh parent window" name = "Button3">
<Script language = "javascript">
<! --
Var k = window. dialogArguments;
// Obtain the value passed by the parent window
If (k! = Null)
{
Document. getElementById ("txt0"). value = k.doc ument. getElementById ("txt9"). value;
}
// Set the value of the parent window
Function setFather ()
{
K.doc ument. getElementById ("txt10"). value = document. getElementById ("txt1"). value
}
// Set the value returned to the parent window
Function retrunValue ()
{
Var s = document. getElementById ("txt2"). value;
Window. returnValue = s;
Window. close ();
}
// -->
</Script>
</BODY>
</HTML>
Note:
The showModalDialog cache is serious. The following is the setting for canceling the client cache in the subwindow. You can also cancel the cache on the server. For details, refer:
Http://adandelion.cnblogs.com/articles/252137.html
<Meta http-equiv = "Expires" CONTENT = "0">
<Meta http-equiv = "Cache-Control" CONTENT = "no-cache">
<Meta http-equiv = "Pragma" CONTENT = "no-cache">
2) The following is an example of closing and refreshing the parent window.
Farther.html
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<Meta name = "Generator" CONTENT = "EditPlus">
<Meta name = "Author" CONTENT = "">
<Meta name = "Keywords" CONTENT = "">
<Meta name = "Description" CONTENT = "">
<Script language = "javascript">
<! --
Function openChild ()
{
Var k = window. showModalDialog ("child.html", window, "dialogWidth: 335px; status: no; dialogHeight: 300px ");
If (k = 1) // determines whether to refresh
{
Alert ('refresh ');
Window. location. reload ();
}
}
// -->
</Script>
</HEAD>
<BODY>
<Br>
Value passed to the parent window: <input id = "txt9" type = "text" value = "3333333333333" NAME = "txt9"> <br>
<Input type = "button" value = "openChild" onclick = "openChild ()" ID = "Button1" NAME = "Button1">
</BODY>
</HTML>
Child.html
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META content = "EditPlus" name = "Generator">
<META content = "" name = "Author">
<META content = "" name = "Keywords">
<META content = "" name = "Description">
<Meta http-equiv = "Expires" content = "0">
<Meta http-equiv = "Cache-Control" content = "no-cache">
<Meta http-equiv = "Pragma" content = "no-cache">
</HEAD>
<BODY>
<FONT face = ""> </FONT>
<Br>
Value passed by the parent window: <input id = "txt0" type = "text" name = "txt0"> <br>
<Input id = "Button1" onclick = "winClose (1)" type = "button" value = "Close refresh parent window" name = "Button1">
<Input id = "Button2" onclick = "winClose (0)" type = "button" value = "close parent window not refreshed" name = "Button2">
<Script language = "javascript">
<! --
Var k = window. dialogArguments;
// Obtain the value passed by the parent window
If (k! = Null)
{
Document. getElementById ("txt0"). value = k.doc ument. getElementById ("txt9"). value;
}
// Close the window and return the refresh parameter.
Function winClose (isRefrash)
{
Window. returnValue = isRefrash;
Window. close ();
}
// -->
</Script>
</BODY>
</HTML>
Description
1. The client cache is canceled as follows:
<Meta http-equiv = "Expires" CONTENT = "0">
<Meta http-equiv = "Cache-Control" CONTENT = "no-cache">
<Meta http-equiv = "Pragma" CONTENT = "no-cache">
You can also cancel the cache on the server. For details, refer:
Http://adandelion.cnblogs.com/articles/252137.html
2. Pass the description to the parent window. Can aaa. aspx be used in ASP. NET? Id = 1.
3. If the parent window is not refreshed, you can directly set it in the parent window.
<Script>
Window. showModalDialog ("child.html", window, "dialogWidth: 335px; status: no; dialogHeight: 300px ");
</Script>
4. In the subwindow, if you want to submit the page, add:, so that the new window will not be opened.
<Head>
<Base target = "_ self">
</HEAD>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
