父页面代码 test1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>父页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div>
我是父页面
点击我,让我变弹窗<a href="javascript:void(0)" onclick="jump()">点击</a>
</div>
<script>
var url_path_html;//项目地址
function getContextHtmlPath() {
var pathName = document.location.pathname;
var index = pathName.substr(1).indexOf("/");
var result = pathName.substr(0,index+1);
if(result != "/pro_name") {
result = pathName.substr(0,0);
}
return result;
}
url_path_html = getContextHtmlPath();
var page ;
function jump(){
page=layer.open({
type: 2,
title: '子页面',
maxmin: true,
shadeClose: false, //点击遮罩关闭层
area : ['700px' , '400px'],
content:url_path_html+'/test2.html?callback=childrenCall',//回调函数名
btn: ['关闭'],
cancel: function(index){ //或者使用btn2
layer.close(index);
}
});
}
function childrenCall(content){//回调函数
layer.close(page);//关闭弹出框
layer.alert(content);//回调的参数,在此方法可以做相应的处理,比如保存到数据库,或告诉父页面调用成功等提示信息
}
</script>
<script type="text/javascript" src="../../../js/jquery/jquery1-11.min.js"></script>
<script type="text/javascript" src="./../../../js/layui/layui.all.js"></script>
</body>
</html>
子页面代码 test2.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>子页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div>
我是子页面
<a href="javascript:void(0)" onclick="modify()">点击</a>
</div>
<script>
function GetQueryString(name,istop) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if(typeof(istop) != "undefined") r = top.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
if(null != GetQueryString("callBack")){
callBack = GetQueryString("callBack");
}
function modify(){
var content="弹出新内容";
if($.isFunction(window.parent[callBack])){//如果是函数则允许调用父页面的方法
window.parent[callBack](content);
}
}
</script>
<script type="text/javascript" src="../../../js/jquery/jquery1-11.min.js"></script>
</body>
</html>