JavaScript showmodaldialog modal dialog box using instructions _javascript tips

Source: Internet
Author: User
Tags generator
1. The standard method
Copy Code code as follows:

<script type= "Text/javascript" >
function Openwin (src, width, height, showscroll) {
window.showModalDialog (SRC, "", "Location:no;status:no;help:no;dialogwidth:" +width+ ";d ialogheight:" +height+ "; Scroll: "+showscroll+"; ");
}
</script>

Example: <span style= "Cursor:pointer" onclick= "Openwin ' http://www.jb51.net ', ' 500px ', ' 400px ', ' No ')" > click </span >

2. It is to be noted that Firefox does not support this feature, it supports the syntax is
Copy Code code as follows:

window.open
(' openwin.html ', ' newwin ', ' Modal=yes, Width=200,height=200,resizable=no, Scrollbars=no ');

3. How to automatically judge the browser
Copy Code code 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 modal dialog box hides the Address bar, while in other browsers it is not necessarily

"Note" In Google Browser, the effect of this mode will also be ineffective.

5. Generally in the pop-up dialog box, we all want the background of the entire parent page to become a translucent color, so that users can see the following is not accessible

When you close the dialog box and then you want to restore

How did this happen?

Copy Code code as follows:

Displays the details of an order through a modal dialog box, and the screen changes color
function Showorderdetails (orderId) {
var url = "details.aspx?orderid=" + OrderID;
$ ("Body"). 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 Code code as follows:

. body1
{
Background-color: #999999;
Filter:alpha (OPACITY=40);
}

6. How to pass a value between pages
ShowModalDialog Transfer value and Refresh
(i) ShowModalDialog use example, the parent window passes a value to the child window, the child window sets the value of the parent window, and the child window is returned to the parent window when it closes.
Farther.html
Copy Code code 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= "Song Body" ></FONT>
<br>
Values passed to the parent window: <input id= "Txt9" type= "text" value= "3333333333333" name= "Txt9" ><br>
Value returned: <input id= "txt11" type= "text" name= "txt11" ><br>
Values for child window settings: <input id= "txt10" type= "text" name= "txt10" ><br>
<input id= "Button1" onclick= "Openchild ()" type= "button" value= "Openchild" name= "Button1" >
</BODY>
</HTML>

child.html
Copy Code code 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= "Song Body" ></FONT>
<br>
Values passed by the parent window: <input id= "txt0" type= "text" name= "Txt0" ><br>
Enter the value to set the parent window: <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>
Enter the value returned: <input id= "Txt2" type= "text" name= "txt2" ><input id= "Button2" onclick= "Retrunvalue ()" Type= "button" Value= "Close tangent return value" Name= "Button2" >
<input id= "Button3" onclick= "type=" button "value=" Close refresh parent window "Name=" Button3 ">
<script language= "JavaScript" >
<!--
var k=window.dialogarguments;
Get the value passed by the parent window
if (k!=null)
{
document.getElementById ("Txt0"). Value = K.document.getelementbyid ("Txt9"). Value;
}
Set the value of a parent window
function Setfather ()
{
K.document.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>

Description
Because the ShowModalDialog cache is serious, the following is the settings for canceling client-side caching in child windows. You can also cancel caching on the server side, for reference:
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" >
II Below is an example of closing the Refresh parent window
Farther.html
Copy Code code 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)//To determine whether to refresh
{
Alert (' Refresh ');
Window.location.reload ();
}
}
-->
</script>
</HEAD>
<BODY>
<br>
Values 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 Code code 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= "Song Body" ></FONT>
<br>
Values 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= "Turn off do not refresh parent window" Name= "Button2" >
<script language= "JavaScript" >
<!--
var k=window.dialogarguments;
Get the value passed by the parent window
if (k!=null)
{
document.getElementById ("Txt0"). Value = K.document.getelementbyid ("Txt9"). Value;
}
Closes the window to return whether the parameter is refreshed.
function Winclose (Isrefrash)
{
Window.returnvalue=isrefrash;
Window.close ();
}
-->
</script>
</BODY>
</HTML>

Description
1. The following is the cancellation of client-side caching:
<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 caching on the server side, for reference:
Http://adandelion.cnblogs.com/articles/252137.html
2. Passing the description to the parent window can also be passed in a aaa.aspx?id=1 way in asp.net.
3. Do not refresh the parent window in the parent window directly in this setting can be.
<script>
window.showModalDialog ("child.html", Window, "dialogwidth:335px;status:no;dialogheight:300px");
</script>
4. In the child window to submit the page to join: so that the new window will not open.
<base target= "_self" >
</HEAD>

Related Article

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.