Of Stack

JS dialog box _JS modal dialog box showModalDialog usage summary

  • 2020-03-30 01:20:44
  • OfStack

The parent window: 


<html>
<head>
<title> No title 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>
</head>
<body>
<form name="form1" action="#">
<input type="text" name="p1t">
<input type="button" value=" Open the dialog box " onclick="opendialog1()">
</form>
</body>
</html>

Child window: 

<html>
<head>
<title> No title 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>
</head>
<body>
<form name="form1" action=""> 
<input type="text" value=" Enter the value to be passed " name="backname">
<input type="button" value=" The value of " onclick="return a()">
</form>
</body>
</html>

-- 1. Basic grammar

-- the 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 a user response. If the user does not respond to the page, the main page will not get a cursor.
-- setting the returnValue property of the window object in dialog.htm causes the main page to get the returnValue. For example, in the onclick of the ok button on the page, write:

Window. The returnValue = window.
Document. All. IptPeopleID. Value

-- assigns the value of the input box iptPeopleID to the returnValue attribute of the window object. You can get this value in the main page:
Var STR = showModalDialog ("dialog1.htm")

-- 2. Pass the initialization value
-- to pass an initialization value to a modal page, use the following statement on the main page:

Var cSearchValue = showModalDialog
(' dialog. HTM ', 'ABC')
Use window.dialogarguments in dialog.htm
Property to 'ABC'. Such as:
< SCRIPT FOR=window EVENT=onload LANGUAGE="JScript" >
If (window dialogArguments! = null)
Window. The document. All. IptPeopleID. Value = window. DialogArguments;
< / SCRIPT >

-- 3. Pass multiple values
If you want to pass more than one parameter to a modal page, you can first define an object in the main page,

The function myDialog () {
Var str1;
Var str2;
}

-- initializes the object before displaying the modal page, and then calls the showModalDialog method.
The function WelcomeYou (iniStr1, iniStr2) {
MyDialog. Str1 = iniStr1;
MyDialog. Str2 = iniStr2;

If (showModalDialog (" dialog2. HTM, "myDialog)
==false) // pass in the object
.

In a modal page, you can use this code
Window. The document. All. IptID. Value =
Window. DialogArguments. Str1
To reference a value, or to assign it with code like this
Window. DialogArguments. Str1 =
Window. The document. All. IptID. Value

-- the complete routine is as follows:
For the case where only one parameter is passed, see: main1.htm and dialog1.htm.

-- for multiple parameters, see: main2.htm and dialog2.htm.


Parent form:
Dim XXX 'returns a value
Dim yyy 'passes to the parameter of the child form
Var XXX = ShowModalDialog ('xxx.asp','yyy','dialogWidth:100px; DialogHeight = 290 px; Status: no ')
Child form:
Dim yyy 'from the parent form
Dim XXX 'returns the parameters of the parent form
Yyy = window. DialogArguments
XXX = window. ReturnValue
 

The use of the window. The dialogArguments


The window.showmodaldialog () method is used to create a modal dialog box that displays HTML content. Because it is a dialog box, it does not have all the properties of a window that is normally opened with window.open().
Window. ShowModelessDialog () method is used to create a display HTML content of the modal dialog box.

When we use showModelessDialog() to open a window, we don't need to use window.close() to close it. When opened in modelless mode [IE5], the window that opens the dialog box can still do other operations. The modal [IE4] dialog always has focus (the focus cannot be removed until it is closed). The modal dialog box is associated with the window that opens it, so when we open another window, their link relationship remains and is hidden under the active window.

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. There is no limit to the types of arguments you can pass, including arrays, etc. The dialog box gets the arguments passed in through window.dialogarguments.
sFeatures
Optional parameter, type: string. To describe the appearance of the dialog box, you can use one or more of the following, using the semicolon ";" Separated.
DialogHeight of dialogHeight is no less than 100px. The default unit of dialogHeight and dialogWidth in IE4 is em, while in IE5 is px. For convenience, when defining modal dialog, use px as unit.
DialogWidth: dialogWidth
DialogLeft: the distance to the left of the desktop.
DialogTop: the distance from the desktop.
Center :{yes|no|1|0} : if the window is centered, the default is yes, but the height and width can still be specified.
Help :{yes|no|1|0} : whether to display the help button, default yes.
Resizable :{yes|no|1|0} [IE5+] : can the size be changed? No by default.
Status :{yes|no|1|0} [IE5+] : whether to display status bar. The default is yes[Modeless] or no[Modal].
Scroll :{yes|no|1|0|on|off} : indicates whether the dialog box displays scrollbar. The default is yes.

There are also several attributes that are used in htas that are not used in normal web pages.
DialogHide :{yes|no|1|0|on|off} : whether the dialog box is hidden when printing or printing preview. The default is no.
Edge: {sunken | raised} : specify the border style of the dialog box. The default is raised.
Unadorned: {yes | no | 1 | | 0 on | off} : the default value is no.

Incoming parameters:
To pass arguments to the dialog box, you pass them through vArguments. Type is unrestricted, with a maximum of 4096 characters for string types. Objects can also be passed, for example:

Test1. HTM
= = = = = = = = = = = = = = = = = = = =
< Script>
Varmxh1 = newArray (" MXH ", "net_lover", "chapter E of mencius")
Varmxh2 = window. The open (" about: blank ", "window_mxh")
// passes an array to the dialog box
Window. ShowModalDialog (" test2. HTM, "mxh1)
// passes the window object to the dialog box
Window. ShowModalDialog (" test3. HTM, "mxh2)
< / script>

Test2. HTM
= = = = = = = = = = = = = = = = = = = =
< Script>
Vara = window. DialogArguments
Alert (" parameter you passed: "+a)
< / script>

Test3. HTM
= = = = = = = = = = = = = = = = = = = =
< Script>
Vara = window. DialogArguments
Alert (" the parameter you passed is the window object, name: "+a.name ")
< / script>

You can return information, or an object, to the window that opens the dialog box through window.returnvalue. Such as:

Test4. HTM
= = = = = = = = = = = = = = = = = = =
< Script>
Vara = window. ShowModalDialog (" test5. HTM)"
For (I = 0; I< A. ength; I++) alert (a [I])
< / script>

Test5. HTM
= = = = = = = = = = = = = = = = = = =
< Script>
FunctionsendTo ()
{
Vara = newArray (" a ", "b")
Window. The returnValue = a
Window. The close ()
}
< / script>
< Body>
< Form>
< Inputvalue = "return" type = buttononclick = "sendTo ()" >
< / form>

Frequently asked questions:
1. How to submit in the 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. 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. The location. The search) alert (window. The location. The search)
< Framesetrows = 0, "*" >
< Framesrc = "about: blank" >
< Framesrc = "test8. HTM" >
< / frameset>

Test8. HTM
= = = = = = = = = = = = = = = = = = =
< Formtarget = "love" method = "get" >
< Inputname = txtvalue = "test" >
< Inputtype = submit>
< / form>
< Script>
If (window. The location. The search) alert (window. The location. The search)
< / script>
2, you can via http://servername/virtualdirname/test.htm? Does name= MXH pass arguments directly to the dialog box?
The answer is no. But it's okay in a frame.

Related articles: