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("liuxin19951109@hotmail.com")
		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="";
	}
}

所有代码完成

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值