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学习网址备忘
May 29 Javascript
JavaScript 学习笔记(四)
Dec 31 Javascript
新鲜出炉的js tips提示效果
Apr 03 Javascript
js实现双向链表互联网机顶盒实战应用实现
Oct 28 Javascript
查找Oracle高消耗语句的方法
Mar 22 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
第一次接触Bootstrap框架
Oct 24 Javascript
微信小程序如何获知用户运行小程序的场景教程
May 17 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 Javascript
vue中axios实现数据交互与跨域问题
May 12 Javascript
前端开发基础javaScript的六大作用
Aug 06 Javascript
介绍一下28个JS常用数组方法
May 06 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
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
php中Smarty模板初体验
2011/08/08 PHP
php中的路径问题与set_include_path使用介绍
2014/02/11 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
vue-resource拦截器设置头信息的实例
2017/10/27 Javascript
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
javascript中的闭包概念与用法实践分析
2019/07/26 Javascript
推荐11个实用Python库
2015/01/23 Python
分析用Python脚本关闭文件操作的机制
2015/06/28 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
关于python3中setup.py小概念解析
2019/08/22 Python
python——全排列数的生成方式
2020/02/26 Python
国外平面设计第一市场:99designs
2016/10/25 全球购物
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
销售辞职报告范文
2014/01/12 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
入党自传范文2015
2015/06/26 职场文书
记者节感言
2015/08/03 职场文书
go web 预防跨站脚本的实现方式
2021/06/11 Golang
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL
Go语言基础map用法及示例详解
2021/11/17 Golang