JS dialog box _js modal dialog box ShowModalDialog Usage Summary _javascript Tips

Source: Internet
Author: User

Parent window:

Copy Code code as follows:

<title> Untitled Page </title>
<script language= "javascript" type= "Text/javascript" >
function Opendialog1 ()
{
var somevalue=window.showmodaldialog ("b.html", "", "DIALOGWIDTH=500PX;DIALOGHEIGHT=500PX;STATUS=NO;HELP=NO; Scrollbars=no ");
Document.form1.p1t.value=somevalue;
}

</script>
<body>
<form name= "Form1" action= "#" >
<input type= "text" name= "p1t" >
<input type= "button" value= "Open dialog box" onclick= "Opendialog1 ()" >
</form>
</body>


child window:
Copy Code code as follows:

<title> Untitled Page </title>
<script language= "javascript" type= "Text/javascript" >
function A ()
{
var wname = Document.form1.backname.value;
Parent.window.returnvalue=wname; The parent window is the previous page
Window.close ();
}
</script>
<body>
<form name= "Form1" action= "" >
<input type= "text" value= "Enter the value to be passed" name= "Backname" >
<input type= "button" value= "value" onclick= "return A ()" >
</form>
</body>

----1. Basic Grammar

----Window object has a method called ShowModalDialog, we can write the following code in the onclick of the page button:

< button onclick= "window.showModalDialog
(' dialog.htm ') ">Search</button >

The----system opens the Dialog.htm page in a new window and waits for the user to respond, and the main page will not get the cursor if the user does not ring the page.
----Set the ReturnValue property of the Window object in dialog.htm, you can get the home page to return a value. For example, write in the onclick of the page's OK button:

window.returnvalue = window.
Document.all.iptPeopleID.value

----assigns the value of the input box Iptpeopleid to the ReturnValue property of the Window object. You can get this value on the main page:
var str = ShowModalDialog ("dialog1.htm")

----2. Passing initialization values
----If you want to pass an initialization value to a modal page, you can use the following statement on the main page:

var csearchvalue=showmodaldialog
(' dialog.htm ', ' ABC ')
Using Window.dialogarguments in dialog.htm
Attribute can get ' ABC '. For example:
< SCRIPT For=window event=onload language= "JScript" >
if (window.dialogarguments!= null)
Window.document.all.iptPeopleID.value = window.dialogarguments;
</script >

----3. Passing Multiple values
----If you want to pass multiple parameters to a modal page, you can first define an object in the main page.

function Mydialog () {
var str1;
var str2;
}

Initializes the modal page----before it is displayed, and then calls the ShowModalDialog method.
function Welcomeyou (INISTR1,INISTR2) {
MYDIALOG.STR1 = INISTR1;
MYDIALOG.STR2 =inistr2;

if (ShowModalDialog ("dialog2.htm", Mydialog)
==false)//passing objects into
......

----in a modal page, you can use this code
Window.document.all.iptid.value=
Window.dialogArguments.str1
To refer to the value, or to assign it to this code.
WINDOW.DIALOGARGUMENTS.STR1 =
Window.document.all.iptID.value

----Complete routines are as follows:
----for passing only one parameter, see: Main1.htm and Dialog1.htm.

----for passing multiple parameters, see: Main2.htm and Dialog2.htm.


Parent form:
Dim xxx ' return value
Dim yyy ' passes to the subform's parameters
var xxx = ShowModalDialog (' xxx.asp ', ' yyy ', ' Dialogwidth:100px;dialogheight=290px;status:no ')
Child form:
Dim yyy ' Parameters from the parent form
Dim xxx ' Returns the parameters of the parent form
YYY = window.dialogarguments
xxx = Window.returnvalue

The use of window.dialogarguments

JavaScript has many built-in methods for generating dialog boxes, such as: Window.alert (), Window.confirm (), Window.prompt (), and so on. However, IE provides more methods to support the dialog box. Such as:

ShowModalDialog () (ie4+ support)
showModelessDialog () (ie5+ support)


The window.showModalDialog () method is used to create a modal dialog box that displays HTML content, and because it is a dialog box, it does not have all the properties of a window that is normally opened with window.open ().
The Window.showmodelessdialog () method is used to create a modeless dialog box that displays HTML content.

When we open the window with showModelessDialog (), we do not have to use Window.close () to close it, when the modeless mode [IE5] Open, Open the dialog window can still do other things, that is, the dialog box is not always the top focus, When the URL of the window that opens it changes, it closes automatically. The modal [IE4] mode dialog box always has the focus (the focus cannot be moved until it closes). The modal dialog box is associated with the window that opens it, so when we open another window, their link relationship is still saved and hidden underneath the active window.

Use the following methods:
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.
Dialogheight dialog box height, not less than 100px,ie4 dialogheight and dialogwidth The default unit is EM, and the IE5 is PX, for the convenience of its see, in the Definition of modal dialog box, with PX to do units.
Dialogwidth: Dialog box width.
Dialogleft: The distance from the left of the desktop.
Dialogtop: The distance from the desktop.
CENTER:{YES|NO|1|0}: The window is centered, the default yes, but the height and width can still be specified.
HELP:{YES|NO|1|0}: Does the Help button appear, default yes.
Resizable:{yes|no|1|0}[ie5+]: Whether the size can be changed. Default No.
Status:{yes|no|1|0}[ie5+]: Whether the status bar is displayed. Default is yes[modeless] or no[modal].
Scroll:{yes|no|1|0|on|off}: Indicates whether the dialog box displays scroll bars. The default is yes.

There are several attributes that are used in an HTA and are generally not used in general Web pages.
Dialoghide:{yes|no|1|0|on|off}: Dialog box is hidden when printing or printing preview. The default is No.
Edge:{sunken|raised}: Indicates the border style of the dialog box. Default is raised.
Unadorned:{yes|no|1|0|on|off}: No is default.

Incoming parameters:
To pass arguments to the dialog box, it is passed through the varguments. Type is not restricted, for a string type, the maximum is 4,096 characters. You can also pass objects, for example:

Test1.htm
====================
<script>
Varmxh1=newarray ("Mxh", "Net_lover", "Mencius E chapter")
Varmxh2=window.open ("About:blank", "Window_mxh")
Passing an array to a dialog box
window.showModalDialog ("test2.htm", MXH1)
Passing a Window object to a dialog box
window.showModalDialog ("test3.htm", Mxh2)
</script>

Test2.htm
====================
<script>
Vara=window.dialogarguments
Alert ("The parameter you passed is:" +a)
</script>

Test3.htm
====================
<script>
Vara=window.dialogarguments
Alert ("The parameter you passed is a Window object, Name:" +a.name)
</script>

You can return information by Window.returnvalue to the window that opens the dialog box, or you can also be an object. For example:

Test4.htm
===================
<script>
Vara=window.showmodaldialog ("test5.htm")
for (i=0;i<a.length;i++) alert (A[i])
</script>

Test5.htm
===================
<script>
Functionsendto ()
{
Vara=newarray ("A", "B")
Window.returnvalue=a
Window.close ()
}
</script>
<body>
<form>
<inputvalue= "Back" type=buttononclick= "SendTo ()" >
</form>

Problems:
1. How do I commit in a modal dialog box without opening a new window?
If your browser is ie5.5+, you can use an IFRAME with the name attribute in the dialog box, and you can set target as the name of the IFRAME at the time of submission. For ie4+, you can use a frame with a height of 0: example,

Test6.htm
===================
<script>
window.showModalDialog ("test7.htm")
</script>

Test7.htm
===================
if (window.location.search) alert (window.location.search)
<framesetrows= "0,*" >
<framesrc= "About:blank" >
<framesrc= "Test8.htm" >
</frameset>

test8.htm
===================
<formtarget= "_self" method= "Get"
< Inputname=txtvalue= "Test"
<inputtype=submit>
</form>
<script>
if ( Window.location.search) alert (window.location.search)
</script>
2, available through http://servername/ Virtualdirname/test.htm?name=mxh is the way to pass parameters directly to the dialog box? The
answer is no. But it's OK in the frame.

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.