showModelDialog的使用方法示例详解

日期:2019-09-13编辑作者:最快开奖计算机

前两日接到这样一个职务:在顾客上传附件,供给校验顾客上传附属类小部件中身份ID新闻,假如存在错误音信须要将具有的错误音讯展现出来。
以此需要本身一早先考虑得就是利用jQuery Dialog。可是看看这几个体系未有使用而是使用showModelDialog,所认为了统一,也亟需利用showModelDialog。

window.showModalDialog()方法用来成立四个来得HTML内容的模态对话框,由于是对话框,由此它并不曾一般用window.open()张开的窗口的有所属性。
采纳方式:
varreturnValue = window.showModalDialog(URL [, arguments] [, features])
参数表达:
UQashqaiL:必选参数:用来钦赐对话框要显得的文书档案的U奥迪Q5L。
arguments:可选参数。用来向对话框传递参数。传递的参数类型不限,包含数组等。对话框通过window.dialogArguments来赢得传递进入的参数。
features可选参数。用来说述对话框的外观等音讯,能够应用以下的二个或多少个,用分号”;”隔绝。
dialogHeight 对话框高度,十分大于100px。
dialogWidth: 对话框宽度。 
dialogLeft: 距离桌面左的离开。 
dialogTop: 离桌面上的相距。
center: {yes| no | 1 | 0 }:窗口是或不是居中,私下认可yes,但还能钦赐高度和增长幅度。  help: {yes | no | 1 | 0 }:是不是出示扶助开关,默认yes。  resizable: {yes | no | 1 | 0 } [ie5+]:是不是可被转移大小。默许no。  status: {yes | no | 1 | 0 } [IE5+]:是否出示状态栏。默以为yes[ Modeless]或no[Modal]。  scroll:{ yes | no | 1 | 0 | on | off }:指明对话框是还是不是出示滚动条。暗中认可为yes。
示例:

复制代码 代码如下:

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

height:是依附显示的个数举办支配的。
url:为三个action,该action客商获得拥有的不当职员音信。同不日常间跳转到errorInfo.jsp页面

 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>批量询问身份错误人士名单</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="笔者要修改" class="button_08" onclick="wyxg();"/>  
           <input type="button" value="继续查询" class="button_08" onclick="jxcx();"/>  
       </div>
       <div id="showErrorInfo">
           <table class="errorTable" cellpadding="0" cellspacing="0">
               <tr>
                   <td colspan="3" class="errorTitle">错误人士名单</td>
                   <s:form theme="simple" id="error_download" namespace="/query" method="post"></s:form>
               </tr>
               <tr>
                   <td width="20%" align="center">姓名</td>
                   <td width="30%" align="center">身份证</td>
                   <td width="二分一" align="center">错误音信</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">
      //设置中度
      function setHeight(){
           var _allH = $(".errorMain").height();
           var _H1 = $("#showErrorInfo").height();
           if(_allH>=536){
               $("#showErrorInfo").css("height","500px")
           }
      }

      window.onload = setHeight;
  </SCRIPT>
</html>

样式表: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;
}

结果如下:
图片 1

你可能感兴趣的小说:

  • jQuery EasyUI Dialog拖不下去怎样缓慢解决
  • jQuery达成dialog设置focus宗旨的措施
  • 分享2个jQuery插件--jquery.fileupload与artdialog
  • jQuery前端框架easyui使用Dialog时bug管理
  • JQUE奇骏Y dialog的用法详细深入分析
  • 浅析JQuery UI Dialog的体制设置难点
  • jQuery Dialog 撤销右上角删除按键事件

本文由今晚最快开奖现场直播发布于最快开奖计算机,转载请注明出处:showModelDialog的使用方法示例详解

关键词:

call方法详细介绍,函数的用法表明

call 方法 请参阅 应用于:Function 对象 要求 版本 5.5 调用三个目标的四个办法,以另三个对象替换当前目的。 call 方法...

详细>>

去掉字符串中的空格,如何用javascript去掉字符串

1. 去掉字符串两端的空格   那些近乎只好去掉2头的空格 String.prototype.trim=function (){returnthis.replace(/(^/s*)|(/s*$)/g,'');} 复...

详细>>