获取layer.open弹出层的返回值方法


Posted in Javascript onAugust 20, 2018

正在开发的车联网项目用到了layer API。当我在开发“新建电子围栏”的时候需要弹出地图,用户在地图中画一个区域,最后将这个弹出层的数据返回给原页面。下面是我的实现过:程:

触发弹出层的代码:

layer.open({
     type: 2,
     title: "设置围栏",
     shadeClose: true,
     shade: 0.4,
     area: ['90%', '90%'],
     content: "/ElectronicFence/Map?id=" + id + "&shapeType=" + shapeType,
     btn: ['确定','关闭'],
     yes: function(index){
      //当点击‘确定'按钮的时候,获取弹出层返回的值
      var res = window["layui-layer-iframe" + index].callbackdata();
      //打印返回的值,看是否有我们想返回的值。
      console.log(res);
      //最后关闭弹出层
      layer.close(index);
     },
     cancel: function(){
      //右上角关闭回调
     }
    });

注意:

var res = window["layui-layer-iframe" + index].callbackdata();

这行代码中‘callbackdata'是弹出层里面定义的函数。也许我们知道了什么!这个函数的作用就是返回值。

弹出层中定义返回值的函数:

<script type="text/javascript">
  var map = new AMap.Map("container", {
   resizeEnable: true
  });
  //在地图中添加MouseTool插件
  var mouseTool = new AMap.MouseTool(map);
  AMap.event.addDomListener(document.getElementById('point'), 'click', function () {
   mouseTool.marker({ offset: new AMap.Pixel(-14, -11) });
  }, false);
  AMap.event.addDomListener(document.getElementById('line'), 'click', function () {
   mouseTool.polyline();
  }, false);
  AMap.event.addDomListener(document.getElementById('polygon'), 'click', function () {
   mouseTool.polygon();
  }, false);


  var callbackdata = function () {
   var data = {
    username: 'zhangfj'
   };
   return data;
  }
 </script>

上面的代码就是弹出层里面的JavaScript代码,里面定义了函数'callbackdata' 用来返回值给调用弹出层的页面。

当我们点击弹出层的“确定”按钮的时候,就可以通过'callbackdata'函数获取弹出层的返回值:

F12 查看console.log(res);的输出结果:

获取layer.open弹出层的返回值方法

以上这篇获取layer.open弹出层的返回值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
弹出广告特效代码(一个IP只弹出一次)
May 11 Javascript
JQuery 学习笔记 element属性控制
Jul 23 Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
Javascript中设置默认参数值示例
Sep 11 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 Javascript
js实现按座位号抽奖
Apr 05 Javascript
JavaScript函数节流的两种写法
Apr 07 Javascript
vue + element-ui的分页问题实现
Dec 17 Javascript
vue中的过滤器及其时间格式化问题
Apr 09 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 Javascript
vue路由的配置和页面切换详解
Sep 09 Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 #Javascript
layui弹出层按钮提交iframe表单的方法
Aug 20 #Javascript
详解如何在Vue里建立长按指令
Aug 20 #Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
Aug 20 #Javascript
Angular6 写一个简单的Select组件示例
Aug 20 #Javascript
Layer弹出层动态获取数据的方法
Aug 20 #Javascript
layui 给数据表格加序号的方法
Aug 20 #Javascript
You might like
php正则
2006/07/07 PHP
php去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
php微信开发之上传临时素材
2016/06/24 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
2017/05/20 jQuery
vue的mixins属性详解
2018/03/14 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
JavaScript寄生组合式继承原理与用法分析
2019/01/11 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
Python实现比较两个列表(list)范围
2015/06/12 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
2014年最新学校运动会广播稿
2014/09/17 职场文书
单身申明具结书
2015/02/26 职场文书
法院答辩状格式
2015/05/22 职场文书
新闻稿件写作技巧
2015/07/18 职场文书