一、先看效果:

1.点击三个点的图标弹出了子页面:

2.子页面调用父页面方法,图一调用父页面方法,图二得到父页面var变量。

         

3.选择之后,关闭弹框,父页面得到子页面单选框选择的value

二、如果是想到得到这样的弹出框及父子页面的参数传递。就可以看下面代码了。(重要:有个坑,代码的调试一定要借助服务器跑起来,web项目的话要用tomcat,最后在浏览器调试的时候一定是ip+端口+项目文件访问。我开始的时候就写了个html网页,编辑好了文件,用浏览器打开,死活传值弄不出来。这个应该是浏览器获取dom对象不一样吧,有谁知道的话不妨留个言讨论一下。)

1.要弹出的选择框area_choice.jsp页面代码:

<div  id="choose" style=" width: 100%;height:80px;text-align:left;">
<label><input name="server_area" type="radio" value="ALL" checked="true" />全部(all)</label></br>
<label><input name="server_area" type="radio" value="HZ" />杭州(HZ)</label></br>
<label><input name="server_area" type="radio" value="ALHZ" />阿里杭州(ALHZ)</label></br>
<label><input name="server_area" type="radio" value="ALQD" />阿里青岛(ALQD)</label></br>
<label><input name="server_area" type="radio" value="ZP" />(周浦)ZP</label></br>
<label><input name="server_area" type="radio" value="ALSZ" />(阿里深圳)ALSZ</label></br>
<label><input name="server_area" type="radio" value="ALBJ"/>(阿里北京)ALBJ</label></br> <input type="button" value="获取父消息" onclick="getMess();"> </input>
</div>
<script>
window.getChoseId=function () {
var value='';
var radio = document.getElementsByName("server_area");
for(var i = 0;i<radio.length;i++)
{
if(radio[i].checked==true)
{value = radio[i].value;
break;}
}
return value;
};
function getMess() {
//调用父页面方法
parent.ToChildren(); alert("获取父页参数:"+parent.server_type);
}
</script>

2.父页面调用代码:点击按钮调用showd()方法就好。

function showd(){
var indext=layer.open({
type: 2,
title: '切换机房',
maxmin: true,
btn: ['确定','取消'],
area: ['220px', '320px'],
content: '../layer/area_choice.jsp',
yes: function (layero, index) {
var newpsw = window[index.find('iframe')[0]['name']]; var value=newpsw.getChoseId(); parent.layer.close(indext);
alert("父页面得到子页面的选择值:"+value);
changeMapArea(value); } ,
btn2: function () {
parent.layer.close(indext);
} , });
}
function ToChildren() {
alert("子页面调用父页面方法");
}

使用layer 弹出对话框 子父页面相互参数传递 父页面获取子页面参数实例的更多相关文章

  1. layer 弹出对话框 子父页面相互参数传递

    转载:https://blog.csdn.net/flybridy/article/details/78610737

  2. 在子页面使用layer弹出层时只显示遮罩层,不显示弹出框问题

    最近子页面使用layer弹出层时只显示遮罩层,不显示弹出框,这个问题搞了很久,最后才发现,在子页面上使用弹出框时,如果只使用layer.alert()或者layer.open()时,会默认在当前页面弹 ...

  3. layer 弹出层 回调函数调用 弹出层页面 函数

    1.项目中用到layer 弹出层,定义一个公用的窗口,问题来了窗口弹出来了,如何保存页面上的数据呢?疯狂百度之后,有了结果,赶紧记下. 2.自己定义的公共页面方法: layuiWindow: func ...

  4. HTML页面使用layer弹出框输入数据

    javascript中layer是一款近年来备受青睐的web弹层组件,layer.open对弹出框进行输入信息,并处理返回结果.详细介绍http://layer.layui.com/ 部署:将laye ...

  5. 移动端页面弹出对话框效果Demo

    核心思路:设置一个隐藏的(display:none;).背景偏暗的div及其子div作为对话框.当点击某处时,将此div设置为显示. 核心代码例如以下(部分js代码用于动态调整div内容的行高.这部分 ...

  6. ASP.NET 弹出对话框和页面之间传递值的经验总结

    今天碰到一个弹出对话框(PopUp dialog)的问题, 因该是个傻瓜问题, 但是还是让我研究了半天, 总结了一些前人经验, 拿出来跟大家分享一下! 在ASP.Net中页面之间的传值方法有很多,但是 ...

  7. layer弹出层设置相对父级元素定位

    layer弹出层默认是相对body固定定位的,可是项目中一般需要相对某个盒子相对定位,下面是个加载弹层例子: var loadIndex = layer.open({ type: 3, //3 表示加 ...

  8. Response.Write("<script>alert('弹出对话框!')</script>") 后跟Response.Redirect("page.aspx");不能弹出对话框,直接跳转页面了 如何解?

    Response.Write和Response.Redirect一起用的时候就会这样,write脚本和redirect脚本不能同时使用,这样不会执行脚本,最好使用ClientScript 改进方法: ...

  9. layer弹出信息框API

    首先向大家推荐layer,在这里也非常感谢贤心的贡献,非常不错的信息框及弹出层解决方案,为一些项目的前端开发提高了很大的效率,希望layer 越办越好! 下面是API,呵呵,官方抄袭过来的,为了自己看 ...

随机推荐

  1. jQuery之制作简单的轮播图效果

    [源代码] 链接:https://pan.baidu.com/s/1XpZ66D9fmSwWX3pCnGBqjA 密码:w104 [整体构思] 这个轮播图使用的是jQuery,所以Js的整体代量比较少 ...

  2. zxing生成二维码设置边框颜色

    真是研究了很久很久,满满的泪啊 zxing生成二维码,默认是可以增加空白边框的,但是并没有可以设置边框颜色的属性. 其中增加空白边框的属性的一句话是: Map hints = new HashMap( ...

  3. 洛谷P4035 [JSOI2008]球形空间产生器(高斯消元)

    洛谷题目传送门 球啊球 @xzz_233 qaq 高斯消元模板题,关键在于将已知条件转化为方程组. 可以发现题目要求的未知量有\(n\)个,题目却给了我们\(n+1\)个点的坐标,这其中必有玄机. 由 ...

  4. 自学Zabbix11.3 Zabbix SNMP 常用OID列表

    点击返回:自学Zabbix之路点击返回:自学Zabbix4.0之路点击返回:自学zabbix集锦 自学Zabbix11.3 Zabbix SNMP 常用OID列表 点击获取CISCO设备OID 系统参 ...

  5. ffmpeg 在ubuntu上编译环境搭建和开发

    步骤如下: 1. 下载 官网永远是王道,呵呵:http://ffmpeg.org/download.html 或者 svn checkout svn://svn.mplayerhq.hu/ffmpeg ...

  6. Linux中使用Electronic WeChat客户端

    微信推出了Windows版和Mac版,一直没有推出也不会推出Linux版本,这就催生了Electronic WeChat(https://github.com/geeeeeeeeek/electron ...

  7. A1010. Radix

    Given a pair of positive integers, for example, 6 and 110, can this equation 6 = 110 be true? The an ...

  8. java NIO 直接与非直接缓冲区

    ByteBuffer有两个创建缓冲区的方法:static ByteBuffer allocate(int capacity)static ByteBuffer allocateDirect(int c ...

  9. vue使用v-if v-show页面闪烁,div闪现的解决方法

    v-if和v-show可能是日常开发中最常用的两个指令,虽然看上去两者功能是类似的,但是两者还是存在很大区别的. v-if与v-show区别: 在切换 v-if 块时,Vue.js 有一个局部编译/卸 ...

  10. Angular开发小笔记

    一.父组件怎么覆盖子组件的样式呢 1./deep/(不建议这么做,以后angular会取消,因为这样写不利于组件的独立性) 在父组件的scss里面写: :host{ 子组件名 /deep/ label ...