最近一段时间,所做系统需要实现使用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="";
}
}
所有代码完成