借用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弹出层, ...
随机推荐
- ZOJ3791 An Easy Game(DP)
给两个长n的01串s1和s2,要对s1进行k次修改,每次修改m个不同位置,问有几种方式修改成s2. 想偏了,只想到原始的01数值是不重要的,因为每个位置修改次数的奇偶性是确定的这一层.. 其实,这题只 ...
- java.lang.RuntimeException: Invalid action class configuration that references an unknown class named [xxxAction]。
java.lang.RuntimeException: Invalid action class configuration that references an unknown class name ...
- C#可以获取Excel文件中Sheet的名字
C#可以获取Excel文件中Sheet的名字吗 C#可以获取Excel文件中Sheet的名字吗 我试过WPS的表格可以 可以 要代码么 百度都有 [深圳]Milen(99696619) 14:13: ...
- asp.net 微信企业号办公系统-表单及流程设计配置实例
在环境搭建好之后,我们就来学习一下怎样快速创建一个流程,并执行和流转该流程(我们这里讲的只是入门,不涉及到具体流程参数设置). 创建一个流程步骤为:在数据库在创建表-->设计表单-->设置 ...
- Word 2010 给公式添加序号
在写paper的时候,我们常常要给公式编号,难道我们要在公式和最右边的序号之间疯狂按空格键吗,当然不是,我们可以有更高效的方法来完成. 首先我们插入一个1x3的表格,然后调节首尾两个格子的大小,借助标 ...
- Html - Bootstrap Panel面板
http://v3.bootcss.com/components/#panels Bootstrap Panel面板 <div class="panel panel-default&q ...
- PAT天梯赛练习题 L2-013 红色警报(并查集+逆序加边)
L2-013. 红色警报 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 战争中保持各个城市间的连通性非常重要.本题要求你编写一 ...
- oracle imp导入库到指定表空间
1.创建表空间 create tablespace example_tablespace datafile 'e:\****.dbf' size 10m reuse autoextend on nex ...
- CSS权威指南 - 浮动和定位 2
定位 定位的想法很简单元素框相对于正常位置出现在哪里. 定位:static,相对, 绝对, fixed, 继承 static就是默认的位置 相对就是相对于默认位置的偏移.原来的static定位位置依然 ...
- Using Vertex Texture Displacement for Realistic Water Rendering
http://blog.csdn.net/soilwork/article/details/709869 Using Vertex Texture Displacement for Realistic ...