jquery showModelDialog的使用方法示例详解


Posted in Javascript onNovember 19, 2013

前两天接到这样一个任务:在用户上传附件,需要校验用户上传附件中身份证信息,如果存在错误信息需要将所有的错误信息展示出来。
这个需求我一开始考虑得就是使用jQuery Dialog。但是看到这个项目没有使用而是使用showModelDialog,所以为了统一,也需要使用showModelDialog。

window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框,由于是对话框,因此它并没有一般用window.open()打开的窗口的所有属性。
使用方法:
varreturnValue = window.showModalDialog(URL [, arguments] [, features])
参数说明:
URL:必选参数:用来指定对话框要显示的文档的URL。
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="50%" 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;
}

结果如下:
jquery showModelDialog的使用方法示例详解

Javascript 相关文章推荐
Javascript中Array.prototype.map()详解
Oct 22 Javascript
JavaScript开发人员的10个关键习惯小结
Dec 05 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
jQuery在线选座位插件seat-charts特效代码分享
Aug 27 Javascript
浅谈如何实现easyui的datebox格式化
Jun 12 Javascript
详解如何较好的使用js
Dec 16 Javascript
jQuery多选框选择数量限制方法
Feb 08 Javascript
js实现九宫格拼图小游戏
Feb 13 Javascript
JS分页的实现(同步与异步)
Sep 16 Javascript
vue组件间通信子与父详解(二)
Nov 07 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 #Javascript
禁止ajax缓存获取程序最新数据的方法
Nov 19 #Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 #Javascript
jQuery控制iFrame(实例代码)
Nov 19 #Javascript
jquery 检测元素是否存在的实例代码
Nov 19 #Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
Nov 19 #Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 #Javascript
You might like
php文件怎么打开 如何执行php文件
2011/12/21 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
jquery maxlength使用说明
2011/09/09 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
javascript 缓冲运动框架的实现
2017/09/29 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
vue-cli webpack 引入swiper的操作方法
2018/09/15 Javascript
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
浅谈python内置变量-reversed(seq)
2017/06/21 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
应用电子技术专业个人求职信
2013/09/21 职场文书
狼和鹿教学反思
2014/02/05 职场文书
销售主管岗位职责
2014/02/08 职场文书
商务经理岗位职责
2014/07/30 职场文书
践行三严三实心得体会
2014/10/13 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server