layer官网: http://sentsin.com/jquery/layer/
首先,是common.js,直接引用即可。
//字符串以xx结尾 String.prototype.endWith=function(endStr){ var d=this.length-endStr.length; return (d>=0&&this.lastIndexOf(endStr)==d); };
//父窗口调用此方法 function openWin(winTitle,winURL,width,height,callback){ var winWidth = width==null?"90%":""+width; var winHeight = height==null?"90%":""+height; if(!winWidth.endWith("%"))winWidth+="px"; if(!winHeight.endWith("%"))winHeight+="px"; top.layer.open({ type: 2, maxmin: false, title: winTitle, shade: [0.5,'#333'], offset: ['50px', ''], //上边距50像素 area: [winWidth, winHeight], content:winURL }); //保存callback,根据子窗口的index来索引 if(callback && typeof(callback) === "function"){ share.data(parent.layer.index,callback); } } //此方法由子窗口调用,故window.name是iframe页面的name function closeWin(data){ //取得callback var callback = share.remove(parent.layer.getFrameIndex(window.name)); if(callback && typeof(callback) === "function"){ //callback初始是由父窗口创建的,所以此时回调时,仍然是父窗口执行的。 callback(data); } //关闭窗口 parent.layer.close(parent.layer.getFrameIndex(window.name)); } var share = {
/** * 跨框架数据共享接口 * @param {String} 存储的数据名 * @param {Any} 将要存储的任意数据(无此项则返回被查询的数据) */ data: function (name, value) { var top = window.top, cache = top['_CACHE'] || {}; top['_CACHE'] = cache; return value !== undefined ? cache[name] = value : cache[name]; }, /** * 数据共享删除接口 * @param {String} 删除的数据名 */ remove: function (name) { var cache = window.top['_CACHE']; var value = null; if (cache && cache[name]){ value = cache[name]; delete cache[name]; } return value; } };
调用范例, <%@ include file="../include/topLess.jsp"%>
登录名: <input name=userLoginname type="text" class="button" id="userLoginname" value="${obj.userLoginname}" size="30" /> 企业名称: <input name=unitName type="text" class="button" id="unitName" value="${obj.mc}" size="20" /> 企业地址: <input name=unitName type="text" class="button" id="unitName" value="${obj.addr}" size="20" /> <br /> <input type="button" value="选择" onclick="selectOk()" /> <a href="#" onclick="openEditWin2('bbf6f41819834b6a9883e7f9a3a6fc1e',myCallBack)">[详细]</a> <input type="button" value="关闭" onclick="closeWin();" /> <div id="winName"></div> <script> $("#winName").html(window.name);
function myCallBack(obj) { $('#userLoginname').val(obj); }
function openEditWin2(id, callback) { openWin("查看详情", "view?id=" + id, 600, 300, callback); }
function selectOk() { closeWin($('#userLoginname').val()); } </script> <%@ include file="../include/bottom.jsp"%>
一个页面,自己弹自己哈,有点乱,呵呵。
弹窗时,调用openWin方法,传一个回调方法的名字进来。 子窗口关闭时,调用closeWin方法,把要传的值扔进来即可。
然后父窗口的回调方法就执行了,随便操作父窗口吧。
这样,子窗口就独立了,无需知道父窗口的结构。 官方的例子写得真烂~~~ ====================================== 注意,新版的已经变写法了: top.layer.open({ type: 2, title: '发票作废', maxmin: true, shadeClose: false, //点击遮罩关闭层 area : ['1000px' , '600px'], content: ctx + '/invoiceHandel/add?flag=putong' }); 最后是content接一个url,以前是iframe..
|