Home > Developer > JavaScript
Two days ago, I received a task like this: when a user uploads an attachment, the user needs to verify the ID card information in the uploaded attachment. If an error message exists, all the error information should be displayed.
At the beginning, I considered using jQuery Dialog. However, we can see that showModelDialog is not used for this project, so showModelDialog is also required for unification.
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 the window opened by window. open.
Usage:
VarreturnValue = window. showModalDialog (URL [, arguments] [, features])
Parameter description:
URL: Required parameter: Specifies the URL of the document to be displayed in the dialog box.
Arguments: Optional. 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.
Features is an optional parameter. Used to describe the appearance and other information of the dialog box. You can use one or more of the following, separated by semicolons.
The height of the dialogHeight dialog box, which is not smaller than PX.
DialogWidth: Dialog Box width.
DialogLeft: The left distance from the desktop.
DialogTop: the distance from the desktop.
Center: {yes | no | 1 | 0}: whether the window is centered. The default value is yes, but the height and width can still be specified. Help: {yes | no | 1 | 0}: whether to display the help button. The default value is yes. Resizable: {yes | no | 1 | 0} [ie5 +]: whether the size can be changed. No by default. Status: {yes | no | 1 | 0} [IE5 +]: whether to display the status bar. The default value is yes [Modeless] or no [Modal]. Scroll: {yes | no | 1 | 0 | on | off}: Specifies whether the scroll bar is displayed in the dialog box. The default value is yes.
Example:
Copy codeThe Code is as follows:
Var rv = window. showModalDialog ("<% = path %>/query/query_showErrorInfo.action", "", "dialogWidth = 600px; dialogHeight =" + height + "px; dialogLeft = 400px; dialogTop = 200px; center = no; resizable = no ");
Height: controls the display quantity.
Url: it is an action. The action user obtains information about all error personnel. Go to the errorInfo. jsp page at the same time
ErrorInfo. jsp
Copy codeThe Code is as follows:
<% @ Page language = "java" import = "java. util. *" pageEncoding = "UTF-8" %>
<% @ Taglib uri = "/struts-tags" prefix = "s" %>
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN">
<Html>
<Head>
<Title> batch query the list of persons with incorrect identities </title>
<Script type = "text/javascript" src = "/bjlc/js/jquery-1.4.4.min.js"> </script>
<Link href = "/bjlc/css/queryErrorInfo.css" rel = "stylesheet" type = "text/css"/>
<Link href = "/bjlc/css/index.css" rel = "stylesheet" type = "text/css"/> <Base target = "download">
<Body>
<Div class = "errorMain">
<Div class = "errorBtn">
<Input type = "button" value = "I want to modify" class = "button_08" onclick = "wyxg ();"/>
<Input type = "button" value = "Continue query" class = "button_08" onclick = "jxcx ();"/>
</Div>
<Div id = "showErrorInfo">
<Table class = "errorTable" cellpadding = "0" cellspacing = "0">
<Tr>
<Td colspan = "3" class = "errorTitle"> List of error personnel </td>
<S: form theme = "simple" id = "error_download" namespace = "/query" method = "post"> </s: form>
</Tr>
<Tr>
<Td width = "20%" align = "center"> name </td>
<Td width = "30%" align = "center"> ID card </td>
<Td width = "50%" align = "center"> error message </td>
</Tr>
<S: iterator value = "# request. ecList">
<Tr>
<Td> <s: property value = "xm"/> </td>
<Td> <s: property value = "sfz"/> </td>
<Td> <s: property value = "message"/> </td>
</Tr>
</S: iterator>
</Table>
</Div>
</Div>
</Body>
<SCRIPT type = "text/javascript">
// Set the height
Function setHeight (){
Var _ allH = $ (". errorMain"). height ();
Var _ H1 = $ ("# showErrorInfo"). height ();
If (_ allH> = 536 ){
$ ("# ShowErrorInfo" ).css ("height", "500px ")
}
}
Window. onload = setHeight;
</SCRIPT>
</Html>
Style Sheet: queryErrorInfo.css
Copy codeThe Code is as follows:
Html, body,. errorMain {
Overflow: hidden;
Height: 100%;
Height: 100%;
}
# ShowErrorInfo {
Width: 100%;
OVERFLOW-Y: auto;
OVERFLOW-X: hidden;
}
. ErrorTable {
Width: 90%;
Margin: 5% PX;
Font-size: 12px;
Border: 1px solid # 8DC8FF;
}
. ErrorTable td {
Height: 40px;
Border-right: 1px solid # 8DC8FF;
Border-bottom: 1px solid # 8DC8FF;
Text-align: center;
}
. ErrorTable td: last-child {
Border-right: 0px;
}
Td [id = "btn"] {
Border-bottom: 0px;
}
. ErrorTitle {
Font-weight: bold;
Font-size: 14px;
Background-color: # C6E3FF;
Color: #176ED2;
Text-align: center;
}
. ErrorBtn {
Width: 100%;
Height: 20px;
Text-align: center;
Bottom: 0px;
Position: absolute;
}
The result is as follows:
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
