借用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弹出层, ...
随机推荐
- 水题 ZOJ 3875 Lunch Time
题目传送门 /* 水题:找排序找中间的价格,若有两个,选价格大的: 写的是有点搓:) */ #include <cstdio> #include <iostream> #inc ...
- SCU3312 Stockholm Knights(最大流)
题目大概说一个n×m的格子中,'.'代表空地,'#'代表障碍,'K'代表骑士,'D'代表目的地.骑士每走一步花一条,每一步可以往(+2,+3)(-2,+3)...八个方向走,问占领所有目的地最少要几天 ...
- HDU3037 Saving Beans(Lucas定理+乘法逆元)
题目大概问小于等于m个的物品放到n个地方有几种方法. 即解这个n元一次方程的非负整数解的个数$x_1+x_2+x_3+\dots+x_n=y$,其中0<=y<=m. 这个方程的非负整数解个 ...
- 三十分钟掌握STL
这是本小人书.原名是<using stl>,不知道是谁写的.不过我倒觉得很有趣,所以化了两个晚上把它翻译出来.我没有对翻译出来的内容校验过.如果你没法在三十分钟内觉得有所收获,那么赶紧扔了 ...
- A Walk Through the Forest[HDU1142]
A Walk Through the Forest Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Jav ...
- 【BZOJ】1008: [HNOI2008]越狱(快速幂)
http://www.lydsy.com/JudgeOnline/problem.php?id=1008 刚开始看不会做啊,以为是dp,但是数据太大!!!所以一定有log的算法或者O1的算法,,,,还 ...
- 【Vijos】1792 摆花
题目链接:https://vijos.org/p/1792 算法:DP 看到这题真的一点不会...只能爆搜一下..但太太慢了..看了题解后,听说是分组背包??不知道.. 好吧,,还是百度了下题解,渐渐 ...
- USACO 5.4 Character Recognition(DP)
非常恶心的一题,卡了三个月,没什么动力做了,代码直接抄的别人的... 这题主要思路就是预处理出几个数组,再预处理出几个数组,最后DP,输出一下路径... 写起来挺非常麻烦,代码不贴了,丢人... 把U ...
- MySQL5.7安装过程以及参数和设置说明
最近在讲MySQL课程,为了省事就在用MySQL5.5版本.因为win10不论32还是64都可以运行MySQL32位.可有很多使用者了解MySQL官网之后,去下载最新版的MySQL来使用,这点我不反对 ...
- iOS dispatch_source_t的理解
Dispatch Source是GCD中的一个基本类型,从字面意思可称为调度源,它的作用是当有一些特定的较底层的系统事件发生时,调度源会捕捉到这些事件,然后可以做其他的逻辑处理,调度源有多种类型,分别 ...