使用方法:

1 除了layer的success,end,cancel回掉函数以外其它的layer参数都可以使用。

2 使用前在layer的js后边把该js引入(可以命名为layerExtend)。

3 layerExtend中只包含一个endHandle回掉方法并且有一个data参数,用于关闭当前弹出层并给上一个弹层回传值。

4 当前弹层给上一个弹层设置值只需要在触发事件时调用zlayer.returnData("你的回传值");   而上一个弹出层取值时只需要使用endHandle中的data参数即可。

5 例如:

  $("#btn1").click(function () {
zlayer.open({
content: "test2.html",
isRefresh: true,//是否刷新上及页面
endHandle: function (data) {
$("#div1").html(data); //接收回传值后的处理
}
});
});

完整插件代码:(有兴趣的可以看下Zlayer和zlayer在不同的场景有何不同)

/*!
@Name:layerExtend辅助弹层
@Author:ZZQ
*/
; window.Zlayer = (function () {
"use strict";
var _dataMap = {}, _indexArray = [], _refresh = 0 & 1, _inputParamsArray = [],
refreshParent = function () {
_refresh = 1;
},
_checkNullObject = function (obj) {
if (typeof obj === "object" && !(obj instanceof Array)) {
var hasProp = 0;
for (var prop in obj) {
hasProp = 1; break;
}
if (!!hasProp) return 0; return 1;
}
},
_pop = function (array) {
var _ret = _indexArray.pop();
if (typeof (_ret) == "undefined") throw "dataArray remove item fail!"; return _ret;
},
_saveMetaData = function (layero, index) {
     if (_indexArray.indexOf(index) != -1) return;
_indexArray.push(index);
_dataMap[_indexArray[_indexArray.length - 1]] = { "backData": null, "currDiv": layero };
},
_postData = function (params) {
_inputParamsArray.push(params);
},
returnData = function (data) {
_dataMap[_indexArray[_indexArray.length - 1]].backData = data;
},
getInputParams = function () {
return _inputParamsArray[_inputParamsArray.length - 1];
},
open = function (options) {
options = options || {};
if (!!_checkNullObject(options)) throw "open Function input is empty object!";
_postData(!!options.inputParams && options.inputParams || null);
!options.title && delete options.title;
delete options.success;
delete options.end;
delete options.cancel;
var _layerOptions = {
type: 2,
title: "...",//input
content: "",//input
area: ['900px', '500px'],//input
maxmin: 0,
zIndex: layer.zIndex,
isRefresh: 0,//input
shadeClose: 0,
success: function (layero, index) {//index不是连续的
_saveMetaData(layero, index);
},
end: function () {
if (_indexArray.length <= 0) {
options.endHandle(-1);
return;
}
var _ret = _pop(_indexArray);
!!_refresh && (options.isRefresh = 1);
_inputParamsArray.pop();
options.endHandle(_dataMap[_ret].backData);//如果没有设置需要的层级返回值则返回空串
delete _dataMap[_ret];
if (!!options.isRefresh) {
if (_indexArray.length > 0) {
$(_dataMap[_indexArray[_indexArray.length - 1]].currDiv).find("iframe").get(0).contentWindow.location.reload();
_pop(_indexArray);
} else window.location.reload();
}
_refresh = 0 & 1;
},
cancel: function () { }
};
$.extend(_layerOptions, options);
layer.open(_layerOptions);
},
openCompatible = function (title, content, width, height, inputParams, isRefresh, callBack) {
var _tmpOptions = {
title: title,//input
content: content,//input
area: [width, height],//input
isRefresh: isRefresh,//input
inputParams: inputParams,//input
endHandle: callBack
};
open(_tmpOptions);
},
findTopIframe = function () {
var curr = self,
iframeObj = curr;
while (curr != window.top) {
iframeObj = curr;
curr = curr.parent;
}
return iframeObj.Zlayer;
},
close = function () {
layer.close(_indexArray[_indexArray.length - 1]);
},
exit = function () {
$(_dataMap[_indexArray[_indexArray.length - 1]].currDiv).find("span").find("a").click();
};
return {
refreshParent: refreshParent,
target: findTopIframe,
open: open,
exit: exit,
close: close,
ShowModelDialog: openCompatible,
returnData: returnData,
getInputParams: getInputParams
};
})();
window.zlayer = Zlayer.target();

借用layer让弹层不限制在iframe内部的更多相关文章

  1. jquery layer弹窗弹层插件 小巧强大

    /* 先去官网下载最新的js  http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js */ 触发弹层的事件可自由绑定,如: $('#id ...

  2. jquery layer弹窗弹层插件 (转)

    /* 先去官网下载最新的js  http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js */ 触发弹层的事件可自由绑定,如: $('#id ...

  3. Layer.js弹层的一些简单的使用

    //-----------这里只是简单的做一下记录,没有封装,作为笔记防止忘记了 //----contentMsg 里面是可以传入 HTML代码的 top.layer.alert(contentMsg ...

  4. layui layer.open() 弹层开启后 Enter回车 遮罩层无限弹处理

    解决方案: 增加success回调及其内容 如下: layer.open({ title:'更新论坛信息', type: 1, skin: 'layui-layer-rim', area: ['500 ...

  5. 弹层组件-layer

    layer是Layui的一个弹层组建,功能强大,总之我很喜欢,下面介绍这个组件的基本用法. 首先如果只需要使用layer而不想使用Layui可以单独下载layer组件包,页面引入jquery1.8以上 ...

  6. jQuery Layer mobile 弹出层

    layer mobile是为移动设备(手机.平板等webkit内核浏览器/webview)量身定做的弹层支撑,采用Native JavaScript编写,完全独立于PC版的layer,您需要按照场景选 ...

  7. jQuery Layer 弹层组件

    layer是一款近年来口碑非常不错的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 在与同类组件的比较中,layer总是能轻易获胜.她 ...

  8. layer弹层基本参数初尝试

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. jQuery、layer实现弹出层的打开、关闭功能实例详解

    本文主要介绍了jQuery.layer实现弹出层的打开.关闭功能,需要的朋友可以参考下,希望能帮助到大家. 打开弹出层: 在list页面带入layer.js 在list页面点击时,弹出form弹出层, ...

随机推荐

  1. 简单几何(凸包) POJ 1696 Space Ant

    题目传送门 题意:一个蚂蚁一直往左边走,问最多能走多少步,且输出路径 分析:就是凸包的变形题,凸包性质,所有点都能走.从左下角开始走,不停排序.有点纠结,自己的凸包不能AC.待理解透凸包再来写.. 好 ...

  2. MVC 依赖注入扩展

    需求: 小明想要完成一个功能F,需要一把锤子T. 有两种办法可以实现: 1)小明很爱动手,精力很旺盛,于是,自己创建一个具有功能F的锤子T,并使用T来完成F: 2)小明很懒,天天睡大觉,于是,他叫小健 ...

  3. BZOJ4310 : 跳蚤

    首先求出后缀数组,得到本质不同的子串的个数. 然后二分答案,每次先通过后缀数组求出第$mid$小的子串,然后贪心进行检验. 检验的时候,从后往前贪心,每次加入一个后缀,如果不能加了,那就划为一段. 时 ...

  4. access-Control-Allow-Origin跨域请求安全隐患

    最新的W3C标准里是这么实现HTTP跨域请求的,Cross-Origin Resource Sharing,就是跨域的目标服务器要返回一系列的Headers,通过这些Headers来控制是否同意跨域. ...

  5. android sdk 安装排错

    如果你遇到了消息为“Failed to fetch URL…” 的错误提示,那么你需要将HTTPS方式改为HTTP方式,方法如下: 碰到这样错误,请按下边的操作. 1)在菜单选择Tools—Optio ...

  6. 【wikioi】1217 借教室

    题目链接http://www.wikioi.com/problem/1217/ 算法:二分答案(线段树可过wikioi数据) 二分:http://www.wikioi.com/solution/lis ...

  7. POJ 3270 Cow Sorting(置换群)

    题目链接 很早之前就看过这题,思路题把,确实挺难想的,黑书248页有讲解. #include <cstdio> #include <cstring> #include < ...

  8. CSS光标属性一览表

    光标类型 CSS 把你的光标放到相应文字上查看效果 要注意光标的实际效果依赖于用户的系统设置,与你在这里看到的效果并不一定一致. 十字准心 cursor: crosshair; 手 cursor: p ...

  9. html5文章 -- HTML5开发实例-网易微博手机Web App开发过程

    HTML5在国内外越来越受到互联网开发团队的青睐.国外,谷歌兴致勃勃地开发Chrome Web Store,微软发布了支持使用HTML5技术开发的“Irish Spring”主题网站,诺基亚斥巨资购得 ...

  10. Intent学习笔记

    Intent首先字面意思大概是意图.负责activity之间或者,activity与service等(我只知道这么点)之间信息的传递.就跟快递员起的作用差不多(我这这么理解),由一下六部分组成: Co ...