1703人阅读
&script type=&text/javascript& src=&${ctx}/jslib/jquery-1.8.3.js&&&/script&
&script type=&text/javascript& src=&${ctx}/js/layer.js&&&/script&
2,父页面写法&&
&input type=&hidden& name=&applySourceType& id=&applySourceType&/&
&input type=&hidden& name=&applySource& id=&applySource&/&
&input type=&hidden& name=&linkMan& id=&linkMan&/&
&input type=&hidden& name=&layerResult& id=&layerResult&/&
function isDeletedStatus(statusId,userId_sign){
//增加逻辑,日志申请来源
var type_url = (statusId==&1&)?'6':'5';
var url = '${ctx}/memberV/recordApplySource?type='+type_
//var retVal = Util.showModalDialog(url);
layer.open({
title: 'bsp_apply_source',
shadeClose: true,
shade: 0.8,
area: ['380px', '60%'],
content: url, //iframe的url
end : function(index){
var retVal = $(&#layerResult&).val();//返回一个标记用于控制,业务逻辑( 也可不写)
if(retVal=='0'){
// 当返回值为
执行 ,业务逻辑
3,子页面写法
//确认关闭页面方法
function firm(){
var applySource = $(&#applySource&).val();
var linkman = $(&#linkman&).val();
if(applySource==&&){ //判断是否选定申请类型
alert(&请选择申请来源!&)
parent.document.getElementById(&applySourceType&).value=${param.type};
parent.document.getElementById(&applySource&).value=applyS
parent.document.getElementById(&linkMan&).value=
parent.document.getElementById(&layerResult&).value=&0&;
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：42794次
排名：千里之外
原创：34篇
(1)(3)(3)(1)(2)(2)(2)(1)(3)(3)(1)(1)(3)(2)(1)(1)(2)(1)(1)(1)(1)(4)整合layer，完美弹出层实现 - 开源中国社区
当前访客身份：游客 [
当前位置：
发布于 日 17时,
整合layer，完美弹出层实现，联系邮箱&
代码片段(4)
1.&[代码]frame.html&&&&
&!DOCTYPE html&
&head lang="en"&
&meta charset="UTF-8"&
&title&弹出层&/title&
&link href="../css/commonNew.css" type="text/css" rel="stylesheet"&
&link href="../css/myMY.css" type="text/css" rel="stylesheet"&
&link href="../css/loPrCenter.css" type="text/css" rel="stylesheet"&
&input type="button" value="选择部门列表" id="question"&
&!-- 部门选择弹出层开始 --&
&div id="sysNodeList" style="display: none" &
&div class="grey_box Branch1"&
&form action="" method="post"&
&div class="info_box"&
&div class="box260"&
&div class="box_title"&部门编码：&/div&
&div class="box_text"&
&input type="text" class="text width150" id="noCode" name="node.code" /&
&div class="box260 lt"&
&div class="box_title"&部门名称：&/div&
&div class="box_text"&
&input type="text" class="text width150" id="noName" name="node.name" /&
&div class="box260 btn"&
&input type="button" id="querySysNodeList"class="btn_yellow" value="查&&&询" id="querySysNodeList" /&
&input type="reset" id="clearSysNodeList" class="btn_gray" value="重&&&置" /&
&div class="box_1"&
&div class="box1_title"&部门机构列表&/div&
&div class="box2_content"&
&div class="data_list"&
&div class="data_title"&
class="data1"&部门编码&/span&
class="data2"&部门名称&/span&
class="data3"&部门地址&/span&
&div class="data clear" align="center"&
&div class="data_box clear" align="center"&
&div class="nodata"&没有查询到符合条件的数据！&/div&
&div class="data_box"&
&span class="display_none"&&/span&
&span class="data1"&&/span&
&span class="data2"&&/span&
&span class="data3"&&/span&
&input type="button" value="confirm" id="confirm"&
&input type="button" value="tips" id="tips"&
&input type="button" value="ftp" id="ftp"&
&script type="text/javascript" src="../js/jquery1.9.js"&&/script&
&script type="text/javascript" src="../layer/layer.min.js"&&/script&
&script type="text/javascript" src="../layer/extend/layer.ext.js"&&/script&
&script type="text/javascript" src="../js/commonNew.js"&&/script&
&script type="text/javascript" src="../js/frame.js"&&/script&
2.&[代码]frame.js&&&&
* Created by anps0907 on 2/6/2015.
$("#question").live("click", function () {
nodeDialg = $.alertDialog({
title : ['选择部门'],
fix : false,
offset:["50px" , '50%'],
area : ['auto','600px'],
shadeClose : false,
page : {dom : '#sysNodeList'}//在sysNodeList是弹出对象id
$("#querySysNodeList").live("click", function () {
//alert("querySysNodeList");
$.alertPlus("ddf",1,"df", function (index) {
$.closeDialog(index);
$("#noCode").attr("value","anps");
$("#clearSysNodeList").live("click", function () {
alert("clearSysNodeList");
$.updateTitle("anps",nodeDialg);
$("#confirm").live("click", function () {
$.layerConfirm("确认要删除？", function (index) {
$.alertPlus("成功",1,"提示");
},"提示", function (index) {
$.closeDialog(index);
$("#tips").live("mouseover",function(){
$.loadTip("我爱你,亲爱的",this,{
style: ['background-color:#0FA6D8; color:#fff', '#0FA6D8'],
maxWidth:150
$("#tips").live("mouseout", function () {
$.closeTip();
$("#ftp").live("click",function(){
$.loadTier(2,0,true);
3.&[代码]commonNew.js&&&&
* Created by anps0907 on 2/6/2015.
$.extend({
* alert弹出信息框，与layer一致
* @param alertMsg 信息内容（文本）
* @param alertType 提示图标（整数，0-10的选择）
* @param alertTit 标题（文本）
* @param alertYes 按钮的回调函数
* @returns
alertPlus: function (alertMsg , alertType, alertTit , alertYes) {
return layer.alert(alertMsg,alertType,alertTit,alertYes);
* layer 关闭弹出层
* index 索引值
closeDialog: function (index) {
return layer.close(index);
* 打开弹出层的方法
* 0：信息框（默认），1：页面层，2：iframe层，3：加载层，4：tips层。
alertDialog: function (setting) {
return $.layer(setting);
*conMsg：信息内容（文本）
* conYes：按钮一回调
* conTit：标题（文本）
* conNo : 关闭按钮回调(函数)
layerConfirm: function (conMsg
, conYes , conTit , conNo) {
return layer.confirm(conMsg,conYes,conTit,conNo);
* 加载tip层
* content ：文本内容
* follow : 要吸引的dom对象, 对象
* parme : parme允许传这些属性{time: 自动关闭所需秒,
* maxWidth: 最大宽度, guide: 指引方向, style: tips样式（参加api表格一中的style属性）
loadTip: function (content, follow, parme) {
return layer.tips(content,follow,parme);
* 关闭 tip 层
closeTip: function () {
return layer.closeTips();
*loadTime：自动关闭所需等待秒数(0时则不自动关闭)，
*loadgif：加载图标（整数，0-3的选择），
*loadShade：是否遮罩（true 或 false）
loadTier: function (loadTime ,loadgif ,loadShade) {
layer.load(loadTime,loadgif,loadShade);
* 修改层的标题
* @param content 内容
* @param index 层索引
updateTitle: function (content, index) {
layer.title(content,index);
layerDemo.zip&~&2MB&&&&
(1508)&&&&
开源中国-程序员在线工具：
相关的代码(78)
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
界面有点···
2楼：OSC首席过客 发表于
这个控件加载CSS有问题，在thinkphp应用里
3楼：土豆-地瓜 发表于
引用来自“开源中国首席”的评论layer
这个控件加载CSS有问题，在thinkphp应用里这个没什么问题吧，这个layer在mobile中也有很多实用的。尤其是在微信上做开发的时候
4楼：土豆-地瓜 发表于
引用来自“疯狂的逍遥”的评论界面有点···哈哈，本身就不会写css，只能做到这个样子了
5楼：OSC首席过客 发表于
引用来自“开源中国首席”的评论layer
这个控件加载CSS有问题，在thinkphp应用里引用来自“土豆-地瓜”的评论这个没什么问题吧，这个layer在mobile中也有很多实用的。尤其是在微信上做开发的时候反正我用时，电脑板的，他说找不到CSS，自动获取的CSS路径错误
6楼：土豆-地瓜 发表于
引用来自“开源中国首席”的评论layer
这个控件加载CSS有问题，在thinkphp应用里引用来自“土豆-地瓜”的评论这个没什么问题吧，这个layer在mobile中也有很多实用的。尤其是在微信上做开发的时候引用来自“开源中国首席”的评论反正我用时，电脑板的，他说找不到CSS，自动获取的CSS路径错误这是可以解决的，，
7楼：徐舟 发表于
不知道楼主是不是来忽悠人的。这个东西是有一套框架的。附上链接&/
开源从代码分享开始
土豆-地瓜的其它代码标签：至少1个，最多5个
关键点：1 window.iframeMap = data.iframeM把js方法中的局部变量转变成父页面的全局变量。2 window.iframeWin = windowlayero.find('iframe')[0];这里的iframeWin指向的是子页面。得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();3 onClick="window.parent.iframeWin.initIframeMap(window.parent.iframeMap['"+i+"']);"如果是要在父页面的js中调用子页面的js方法initIframeMap ，直接使用iframeWin.initIframeMap 就可以了，参数也能直接传递过去。
父页面layerIframeTest.html：
&!DOCTYPE html&
&meta charset="utf-8"&
&meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&
&title&父页面&/title&
&script src="/libs/jquery/2.1.4/jquery.min.js"&&/script&
&script src="layui/layui.js"&&/script&
&link rel="stylesheet" href="layui/css/layui.css"&
&!-- 你的HTML代码 --&
&a href="#" class="getSubPage"&查看&/a&
$('body').on('click', '.getSubPage', function(){
layui.use('layer', function(){
var layer = layui.
layer.open({
shade : 0.3,
area : ['70%','88%'],
title : 'iframe页面标题',
content: ['subPage.html'],
success: function (layero, index) {
var body = layer.getChildFrame('body', index); //LAYER对象下的方法，获取子iframe中的DOM
window.iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
var data ="{\"iframeMap\":[";
data += "{\"iframeContent\":\"iframe页面\",";
data +="\"iframeSubMap\":[";
data += "{\"iframeSubContent\":\"iframe页面弹窗内容\"}";
data += "]}";
data += "]}";
//data = eval('('+data+')');
//data = $.parseJSON(data);
data = JSON.parse(data);
if (data.iframeMap != undefined) {
var html = "";
window.iframeMap = data.iframeM
for(var i in data.iframeMap){
iframePage = data.iframeMap[i];
html += "&tr&";
html += "&td style=\"cursor: color:\" onClick=\"window.parent.iframeWin.initIframeMap(window.parent.iframeMap['"+i+"']);\"&"+iframePage.iframeContent+"内容&/td&";
html += "&/tr&";
body.contents().find("#iframeTbody").html(html);
子页面subPage.html：
&!DOCTYPE html&
&html lang="zh-CN"&
&meta charset="UTF-8"&
&title&iframe页面&/title&
&script src="/libs/jquery/2.1.4/jquery.min.js"&&/script&
&!--&script src="/libs/bootstrap/3.3.4/js/bootstrap.min.js"&&/script&--&
&script type="text/javascript" src="layui/layui.js"&&/script&
&link rel="stylesheet" href="layui/css/layui.css" media="all"&
&div class="layui-tab-content larry-personal-body clearfix"&
&tbody id="iframeTbody"&
&td&无数据&/td&
&script type="text/javascript"&
function initIframeMap(iframeMap) {
var iframeSubMap = iframeMap.iframeSubM
var html = '';
if(iframeSubMap.length == 0){
html += "&div align='center'&无数据&/div&";
for(var i in iframeSubMap){
var iframeSubPage = iframeSubMap[i];
html += "&div&"+iframeSubPage.iframeSubContent+"&/div&";
layui.use('layer', function(){
var layer = layui.
layer.open({
shade : 0.3,
area : ['70%','88%'],
title : iframeMap.iframeContent + "弹窗标题",
content: html
0 收藏&&|&&0
你可能感兴趣的文章
4 收藏，277
6 收藏，661
1 收藏，606
本作品采用署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
分享到微博？
明天提醒我
我要该，理由是：
扫扫下载 App}