layer ui使用多层弹框时,各个页面交互问题

最近在用layer ui的弹框做项目,使用的时候有时会用到2-3级的弹框,多级弹框会遇到每个弹框的数据之间的交互问题,例如:

图中有两个弹框父级弹框编辑用户,子级弹框角色分配,我所选中的复选框,需要在父级弹框里显示出来
那我父级页面的弹框的代码可以这样写
$(‘.user-add‘).on("click", function() {
var url = basePath + "/admin/user/v/userAdd";
layer.open({
type: 2,
title: [‘添加用户‘, ‘font-size:16px;‘],
fixed: false, //不固定
area: ["735px", "545px"], //宽高
shade: 0.4,
content: url,
id: "addresourcedialog",
});
});

打开子级页面的代码

子级页面数据交互的代码
var thisFrame =parent.window.document.getElementById("addresourcedialog").getElementsByTagName("iframe")[0].id;
var dcmt = parent.$(‘#‘+thisFrame)[0].contentWindow;

这里的dcmt就是父级页面了,在子级页面我们可以操作父级页面的数据了

原文地址:http://blog.51cto.com/12885303/2113066

时间: 2024-11-07 22:35:16

layer ui使用多层弹框时,各个页面交互问题的相关文章

关于弹框和原页面的切换问题

写代码经常会遇到这样的情况,按钮点击之后会出现弹框,点击确定之后又要弹框消失,又或者链接到另一个页面. 打开弹窗的代码是这样的: $('#add').click(function () { layer.open({ type: 2, title: '选择研判报告类型', shadeClose: true, shade: 0.3, area: ['550px', '180px'], content: 'yanpan_report_add.php' }); }); 这里是打开了一个550*180的弹

使用mint-ui中弹框组件与原生弹框阻止父页面不滑动方法

1,使用mint-ui框架中<mt-popup></mt-popup>,在组件中加入 lockScroll="true" 阻止父页面不滑动. 2,原生弹框中,弹框页面中最外层div里面加(touchmove事件)@touchmove="handleTouchmove" 然后在methods方法里面加入 handleTouchmove (e) { e.preventDefault() }, 阻止父页面不滑动 原文点击:https://blog.

layer弹框的上面各个属性 -可配置

<script type="text/javascript"> 12 //eg 13 layer.open({ 14 title:"标题信息提示",//标题信息 15 content: 'test',//内容区域 16 move: false,//是否可以拖动,默认可以拖动 17 btn: ['按钮一', '按钮二', '按钮三'], 18 btn1: function(index){ 19 //按钮[按钮一]的回调 20 layer.close(ind

layui table中固定表头,弹框缩放之后,表头对不齐问题

问题描述: 在弹框中的表格,表格设置height属性 如果表格数据太多,表头会固定,只有表内容会滚动 拖动弹框右下角缩放弹框时,表格的头部对不齐 正常显示如图: 缩放之后如图: 解决办法: layer有一个resizing属性,是弹框缩放结束的回调放方法 在回调之后重新根据数据列设置表头的宽度. resizing: function (layero) { var tableDom = layero.find('.layui-table-box'); var theadTable = tableD

弹框CSS、JS

非本人原创,此为本人导师代码,在此整理分析. 1.遮蔽层,弹框弹出时,页面变灰. CSS部分 .overlay{display:none;position:fixed;left:0;top:0;z-index:1000;width:100%;height:100%;background-color:hsla(0, 0%, 0%, .7);} 2.定时提示小弹框,页面垂直居中显示 CSS部分 /*toast提示*/ .toast{position:fixed;top:50%;left:50%;z-

做一个弹框玩玩,顺便熟悉最近新学习的插件封装技术

先上图,没图不成席 [原因]由于公司从开发到现在时间都比较紧张,很多时候需要弹框的地方都直接用alert().confirm().prompt()这些自带的提示框,最大的问题是这三个哥们随着浏览器的不同进行变色,简直是前端变色龙,神奇又无奈 所以,这次和我们的帅气设计师合作总结出这三种提示框,我也通过最近的学习把新学到手的封装技术,融入了进去,相对于大神级别的人,看看就行,顺便指点一下就更好了 [目前自己思考的问题]到目前为止,自己工作也有2.5年了,早早过了只知道实现需求的时候了,更多的是培养

关于页面点击搜索框时,虚拟键盘遮挡搜索框的问题

//当点击搜所框时是页面滚动$('#keyword').focus(function(event) { setTimeout((function(){ var i=0; return function(){ window.scrollTo(0,150) } })(), 200); // return; $('#keyword').blur(function(event) { setTimeout((function(){ var i=0; return function(){ window.sc

手写alert弹框(一)

采用原生的JavaScript, html代码 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <style> .div{ border:4px dashed #ccc;margin:130px auto; text-align:center; font-size:25px; width:100px; height:1

通知 弹框

弹框 整个jap 页面 <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-