Home > Others

Use of showModalDialog in JS

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Basic Introduction:

The window. showModalDialog () method is used to create a modal dialog box that displays HTML content. (The parent window cannot be operated after the window is opened. The operation can only be performed when the mode window is closed)

The window. showModelessDialog () method is used to create a non-modal dialog box that displays HTML content. (That is, other operations can still be performed after opening)

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. The passed parameter types are not limited, including arrays. The dialog box uses window. dialogArguments to obtain the passed parameters.

SFeatures -- optional parameter; Type: String. Used to describe the appearance and other information of the dialog box. You can use one or more of the following, separated by semicolons.

-------------------------------

Parameter transfer:
1. vArguments is used to pass Parameters in the dialog box. The type is not limited. For string types, the maximum value is 4096 characters. Objects can also be passed.
Parent.html

Copy codeThe Code is as follows: <body>
User name:
<Input id = "usernameID" type = "text" readonly/>
<Input id = "buttonID" type = "button" value = "select input"/>
<Script type = "text/javascript">
Var sURL = "showModalDialog2.html ";
// Pass the parent window object to the Child Window
Var vArguments = window;
Var sFeatures = "dialogHeight: 200px; dialogWidth: pixel PX ";
Document. getElementById ("buttonID"). onclick = function (){
// Click "select input" to bring up a dialog box for selection.
Window. showModalDialog (sURL, vArguments, sFeatures );
}
</Script>
</Body>

Children.html

Copy codeThe Code is as follows: <body>
<Script type = "text/javascript">
// After you click "select input", the corresponding values are displayed in the parent window text box.
// Receives objects from the parent window
Var fatherWindow = window. dialogArguments;
Function selectInput (inputElement ){
// Obtain the user name
Var username = inputElement. parentNode. nextSibling. firstChild. nodeValue;
// Set the user name to a location related to the parent window
Fathergatewaydoc ument. getElementById ("usernameID"). value = username;
}

</Script>
<Table border = "1" align = "center">
<Tr>
<Th>
Operation
</Th>
<Th>
User Name
</Th>
</Tr>
<Tr>
<Td>
<Input type = "button" value = "select input" onclick = "selectInput (this)"/>
</Td>
<Td>
Zhang San
</Td>
</Tr>

</Table>
</Body>
Final result:

2. You can use window. returnValue to return information to the window that opens the dialog box. It can be a Boolean value, an integer value, or a js array, or an object.

Parent.html

Copy codeThe Code is as follows: <script type = "text/javascript">
/**
* Use controller to load the JSP page in the simulation window
**/
Function selectUserList (param ){
Var sURL = "$ {pageContext. request. contextPath}/SelectUserController/selUser. do? CheckTip = "+ param. checkType +" & regField = "+ param. regField ";
Var vArguments = window;
Var sFeatures = "scrollbars = no; resizable = no; help = no; status = no; center: yes; dialogHeight = 580px; dialogWidth = 776px "";
Return window. showModalDialog (sURL, vArguments, sFeatures );

}

/**
* Pass the value through JSON and return the JSON Array
**/
Function getUser (){
Var retValue = selectUserList ({'checktype': '', 'regfield ': 'more '});
</Script>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More