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 相关文章推荐
js下用eval生成JSON对象
Sep 17 Javascript
javascript天然的迭代器
Oct 29 Javascript
javascript中xml操作实现代码
Nov 21 Javascript
一个简单的jquery进度条示例
Apr 28 Javascript
javascript中判断json的方法总结
Aug 27 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 Javascript
JS实现DOM删除节点操作示例
Apr 04 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
Apr 17 Javascript
Node.js API详解之 string_decoder用法实例分析
Apr 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
web方式ftp
2006/10/09 PHP
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
Vue.js划分组件的方法
2017/10/29 Javascript
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
python实现进程间通信简单实例
2014/07/23 Python
Python内置数据类型详解
2014/08/18 Python
python复制与引用用法分析
2015/04/08 Python
Python中Class类用法实例分析
2015/11/12 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
浅析Python3爬虫登录模拟
2018/02/07 Python
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
委托书范本
2014/04/02 职场文书
地震捐款倡议书
2014/08/29 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
2015年读书月活动总结
2015/03/26 职场文书
未中标通知书
2015/04/17 职场文书
九九重阳节致辞
2015/07/31 职场文书
python 实现的截屏工具
2021/05/08 Python
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python