js showModalDialog弹框用法

浏览数：54 / 时间：2015年06月09日

场景:

我要做一个图片上传,上传成功后,弹出一个页面,填写其他信息.

上传图片的界面:

选择文件之后,点击[上传]按钮,

选择确定之后,图片上传到服务器,同时服务器会返回json字符串,其中有图片路径,此时使用window.showModalDialog,弹出一个网页,网页中要获取图片地址,用于显示图片

父页面关键代码:

var options = {
			   url: "<%=path%>/upload/upload",
			   type: "POST",
			   dataType:‘json‘,
			   success:function(json) {

			   	// alert(json.fileName);
			   	var obj22 = new Object();
			   	obj22.picPath=json.fileName;
			   	$(‘#picForm‘).resetForm();
			   	window.showModalDialog("<%=path%>/patientPic/add",obj22,"dialogWidth=600px;dialogHeight=640px;help=no");
			   	},
			   error:function(er){
				   //functionChange(er.responseText);
			   }
	};
		$(‘#picForm‘).ajaxSubmit(options);

其中obj22 是用于把父窗口的值传递给子窗口的.

子窗口代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>上传图片</title>
<link rel="stylesheet" type="text/css" href="<%=path%>/static/css/index.css">

<link rel="stylesheet" type="text/css" href="<%=path%>/static/css/global.css">
<script type="text/javascript" src=\‘#\‘" /static/js/jquery-1.10.1.js"></script>
<script type="text/javascript" src=\‘#\‘" /static/js/jquery.form.js"></script>
<script type="text/javascript" src=\‘#\‘" /static/js/common_util.js"></script>
<script type="text/javascript">
	window.onload=function(){
		var patientPicId=com.whuang.hsj.$$id(‘patientPicId‘);
		var obj = window.dialogArguments;
		patientPicId.src=\‘#\‘" /upload/image/‘+obj.picPath;
		// alert(patientPicId.src);
		var picPath=com.whuang.hsj.$$one(‘picPath‘);
		picPath.value=obj.picPath;


	}
	var ajaxSubmit22=function(){
		var patientObj=com.whuang.hsj.$$one("patient");
	    if(!com.whuang.hsj.checkNullValue(patientObj,‘errorSpanId‘,‘请填写姓名.‘)){
	        return ;
	    }
	    var hospitalObj=com.whuang.hsj.$$one("hospital");
	    if(!com.whuang.hsj.checkNullValue(hospitalObj,‘errorSpanId‘,‘请填写医院/门诊.‘)){
	        return ;
	    }
	    var doctorObj=com.whuang.hsj.$$one("doctor");
	    if(!com.whuang.hsj.checkNullValue(doctorObj,‘errorSpanId‘,‘请填写医生姓名.‘)){
	        return ;
	    }
		var options = {
			   url: "<%=path%>/patientPic/ajaxSave",
			   type: "POST",
			   dataType:‘json‘,
			   success:function(json) {
			   		var closeWin22=function(){
			   			$(‘#patientPicForm‘).resetForm();
			   			window.close();
			   		};
			   		setTimeout(closeWin22,3000);
			   		alert("上传成功!");
			   		closeWin22();
			   },
			   error:function(er){
				   //functionChange(er.responseText);
				   alert(er);
			   }
		};
		$(‘#patientPicForm‘).ajaxSubmit(options);	
	}
</script>
</head>
<body style="background-color:#93D6EF" >
<center>
	<h2>图片上传</h2>
	<div id="errorSpanId" >&nbsp;</div>
<form id="patientPicForm"  method="POST" >
<table class="frontPatientPicTable" >
<tr><td class="frontPatientPicTd" >姓名<font color="red">*</font> </td><td> <input  class="frontPatientPicInput" name="patient" type="text" > </td></tr>
<tr><td class="frontPatientPicTd">医院/门诊<font color="red">*</font></td><td> <input class="frontPatientPicInput" name="hospital" type="text" > </td></tr>
<tr><td class="frontPatientPicTd">医生<font color="red">*</font></td><td> <input class="frontPatientPicInput" name="doctor" type="text" > </td></tr>
<tr><td class="frontPatientPicTd">说明</td><td> <input class="frontPatientPicInput" name="desc" type="text" > </td></tr>
<tr><td colspan="2" > <img id="patientPicId" > </td></tr>
<tr><td colspan="2" align="center" > <input  class="frontPatientPicInput" type="button" onclick="ajaxSubmit22()" value="提交" > </td></tr>
</table>
<input type="hidden" name="picPath" >
</form>
</center>
</body>
</html>

子窗口通过