JS實作彈出子視窗并擷取傳回值功能

最近一段時間,所做系統需要實作使用js彈出一個自定義視窗,并且擷取視窗的傳回值功能,經多方查詢未能找到較好的示例,是以無奈之下自己開發了一個彈出式視窗,并稍微封裝了一下.廢話少說,上代碼:

父頁面彈出視窗示例:

$("#c_id").click(function(){///一個點選事件

			///調用已封裝的js,傳入子頁面url以及回調方法
			openWindow.open({
				url:"<%=request.getContextPath()%>/storageroom/selGoodClass",
				winReturn:function(res){
					console.log("ren:"+res);
				}
			})
			
		})
           

子頁面:

function returnValue(){
		///子頁面傳回值公用方法
		window.parent.openWindow.winClose("子頁面傳回的值");
	}
           

需要父頁面引入的公用js:

openWindow = {
	obj2019217191139:"",
	open:function (liuXin2019217191140){
		console.log("[email protected]")
		if(this.obj2019217191139!=""){
			alert("請關閉上一個視窗後繼續操作");
			return;
		}
		this.obj2019217191139 = liuXin2019217191140
		var mbDiv2019218210727 = "<div id='mb2019218211100' "
			+"style='position:absolute;"
			+"top:0;left:0;"
			+"width:100vw;height:100vh;"
			+"background-color:rgba(0,0,0,0.5)'"
			+"></div>"
		$("body").append(mbDiv2019218210727);
		var winDiv2019217215816 = "<div id='win2019217215437' "
			+"style='border-radius:3px;"
			+"position:relative;"
			+"width:70vw;"
			+"height:70vh;"
			+"position:fixed;"
			+"top:15vh;"
			+"left:15vw'>"
				+"<iframe src='"+ this.obj2019217191139.url +"' "
				+"style = 'border-radius:3px;"
				+"z-index:9999;"
				+"padding:0;"
				+"margin:0;"
				+"height:100%;"
				+"width:100%;"
				+"border:1px solid #ccc;"
				+"background:#fff' "
				+"scrolling='no'>"
					+"如果你看到此行資訊，"
					+"說明您的浏覽器過于陳舊，"
					+"請更換最新版浏覽器!"
				+"</iframe>"
			+"</div>"
			$("body").append(winDiv2019217215816);
	},
	winClose:function (res2019217215827){
		if(this.obj2019217191139==""){
			return;
		}
		this.obj2019217191139.winReturn(res2019217215827)
		$("#win2019217215437").remove();
		$("#mb2019218211100").remove();
		this.obj2019217191139="";
	}
}
           

所有代碼完成