Of Stack

Jquery showModelDialog usage method example

  • 2020-03-29 23:51:34
  • OfStack

I received such a task two days ago: when the user uploads the attachment, I need to verify the id information in the attachment. If there is any error information, I need to display all the error information.
This requirement was first considered using jQuery Dialog. However, you see that this project is not using showModelDialog, so you need to use showModelDialog 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 a window that is normally opened with window.open().
Usage:
VarreturnValue = window.showModalDialog(URL [, arguments] [, features])
Parameter description:
Required parameter: specifies the URL of the document to be displayed in the dialog box.
Arguments: optional argument. 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.
Features optional parameter. To describe the appearance of the dialog box, you can use one or more of the following, using the semicolon "; Separated.
DialogHeight height, not less than 100px.
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.
Example: 


var rv = window.showModalDialog("<%=path%>/query/query_showErrorInfo.action","","dialogWidth=600px;dialogHeight="+height+"px;dialogLeft=400px;dialogTop=200px;center=no;resizable=no");

Height: is controlled according to the number of displays.
Url: for an action that gets all the wrong person information. Also jump to the errorinfo.jsp page

  ErrorInfo. JSP 


<%@ 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 search for the wrong person list </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" />  </head>
    <base target="download">
  <body>
      <div class="errorMain">
      <div class="errorBtn">
        <input type="button" value=" I want to change " class="button_08" onclick="wyxg();"/>   
           <input type="button" value=" Continue to query " class="button_08" onclick="jxcx();"/>   
       </div>
       <div id="showErrorInfo">
           <table class="errorTable" cellpadding="0" cellspacing="0">
               <tr>
                   <td colspan="3" class="errorTitle"> Error list </td>
                   <s:form theme="simple" id="error_download" namespace="/query" method="post"></s:form> 
               </tr>
               <tr>
                   <td width="20%" align="center"> The name </td>
                   <td width="30%" align="center"> Id card </td>
                   <td width="50%" align="center"> The 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 

html,body,.errorMain{
    overflow:hidden;
    height: 100%;
    height: 100%;
}
#showErrorInfo{
    width: 100%;
    OVERFLOW-Y: auto; 
    OVERFLOW-X:hidden; 
}
.errorTable{
    width: 90%;
    margin: 10px 5%;
    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 results are as follows:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201311/20131119154353.jpg? 20131019154432 ">

Related articles: