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 相关文章推荐
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
jquery获取下拉框中的循环值
Feb 08 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
微信小程序删除处理详解
Aug 16 Javascript
JavaScript实现构造json数组的方法分析
Aug 17 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
May 09 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+javascript的日历控件
2009/11/19 PHP
域名和cookie问题(域名后缀)
2012/10/10 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
PHP获取ttf格式文件字体名的方法示例
2019/03/06 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
详解如何使用webpack打包JS
2018/06/21 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
python获取多线程及子线程的返回值
2017/11/15 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
flask实现验证码并验证功能
2019/12/05 Python
python opencv实现图像配准与比较
2021/02/09 Python
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
2014年五一促销活动方案
2014/03/09 职场文书
毕业设计说明书
2014/05/07 职场文书
广播节目策划方案
2014/05/23 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA