视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
jqueryshowModelDialog的使用方法示例详解_jquery
2020-11-27 21:15:54 责编:小采
文档

前两天接到这样一个任务:在用户上传附件,需要校验用户上传附件中身份证信息,如果存在错误信息需要将所有的错误信息展示出来。
这个需求我一开始考虑得就是使用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" %>



批量查询身份错误人员名单





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

结果如下:

下载本文
显示全文
专题