借用layer让弹层不限制在iframe内部
使用方法:
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内部的更多相关文章
- jquery layer弹窗弹层插件 小巧强大
/* 先去官网下载最新的js http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js */ 触发弹层的事件可自由绑定,如: $('#id ...
- jquery layer弹窗弹层插件 (转)
/* 先去官网下载最新的js http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js */ 触发弹层的事件可自由绑定,如: $('#id ...
- Layer.js弹层的一些简单的使用
//-----------这里只是简单的做一下记录,没有封装,作为笔记防止忘记了 //----contentMsg 里面是可以传入 HTML代码的 top.layer.alert(contentMsg ...
- layui layer.open() 弹层开启后 Enter回车 遮罩层无限弹处理
解决方案: 增加success回调及其内容 如下: layer.open({ title:'更新论坛信息', type: 1, skin: 'layui-layer-rim', area: ['500 ...
- 弹层组件-layer
layer是Layui的一个弹层组建,功能强大,总之我很喜欢,下面介绍这个组件的基本用法. 首先如果只需要使用layer而不想使用Layui可以单独下载layer组件包,页面引入jquery1.8以上 ...
- jQuery Layer mobile 弹出层
layer mobile是为移动设备(手机.平板等webkit内核浏览器/webview)量身定做的弹层支撑,采用Native JavaScript编写,完全独立于PC版的layer,您需要按照场景选 ...
- jQuery Layer 弹层组件
layer是一款近年来口碑非常不错的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 在与同类组件的比较中,layer总是能轻易获胜.她 ...
- layer弹层基本参数初尝试
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- jQuery、layer实现弹出层的打开、关闭功能实例详解
本文主要介绍了jQuery.layer实现弹出层的打开.关闭功能,需要的朋友可以参考下,希望能帮助到大家. 打开弹出层: 在list页面带入layer.js 在list页面点击时,弹出form弹出层, ...
随机推荐
- LightOJ1051 Good or Bad(DP)
这题感觉做法应该挺多吧,数据规模那么小. 我用DP乱搞了.. dp0[i][j]表示字符串前i位能否组成末尾有连续j个元音字母 dp1[i][j]表示字符串前i位能否组成末尾有连续j个辅音字母 我的转 ...
- bzoj1030 [JSOI2007]文本生成器
1030: [JSOI2007]文本生成器 Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 2654 Solved: 1100[Submit][Stat ...
- System call in linux by C
1: #include <stdlib.h> 2: int system(const char *command); 3: 4: while (something) { 5: int r ...
- BZOJ4026: dC Loves Number Theory
Description dC 在秒了BZOJ 上所有的数论题后,感觉萌萌哒,想出了这么一道水题,来拯救日益枯 竭的水题资源. 给定一个长度为 n的正整数序列A,有q次询问,每次询问一段区间内所 ...
- weblogic sockets 和 thread 问题解决
原创文章,转载须注明出处. 这个问题网上很多答案,可惜没一个能解决.后来发现是weblogic 必须适配JDK 版本. 一般会报这个错误,There are: 5 active sockets, bu ...
- ERROR 2013 (HY000): Lost connection to MySQL server at 'waiting for initial communication packet', system error: 2
ERROR (HY000): Lost connection to MySQL server at 'waiting for initial communication packet', system ...
- Windows下PHPUnit安装
收藏的介绍地址 1.手动方式安装示例:http://blog.sina.com.cn/s/blog_5d3dc0110100ghlo.html2.通过Pear安装示例:blog.sina.com.cn ...
- WBS练习
我们把这次团队程序设计分成了6个模块,让每一个同学都能参与其中,然后让每一个人选一个自己喜欢的模块,最后数据库设计这个部分就大家一起来做. Everybody's task allocation is ...
- Oracle11g创建表空间语句
在plsql工具中执行以下语句,可建立Oracle表空间. /*分为四步 *//*第1步:创建临时表空间 */create temporary tablespace yuhang_temp temp ...
- HTTP 笔记与总结(9)分块传输、持久链接 与 反向 ajax(comet / server push / 服务器推技术)
反向 ajax 又叫 comet / server push / 服务器推技术 应用范围:网页聊天服务器,例如新浪微博在线聊天.google mail 网页聊天 原理:一般而言,HTTP 协议的特点是 ...