js showModalDialog弹框用法

场景:

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

上传图片的界面:

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

选择确定之后,图片上传到服务器,同时服务器会返回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 + "/";
%>












	window.onload=function(){
		var patientPicId=com.whuang.hsj.$$id('patientPicId');
		var obj = window.dialogArguments;
		patientPicId.src='<%=path%>/upload/p_w_picpath/'+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);	
	}




	
图片上传
	 

姓名*    医院/门诊*   医生*   说明        

子窗口通过

window.dialogArguments

 获取父窗口传递的值,界面如下:

上述图片就是根据父窗口传过来的图片路径来显示的.