获取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 相关文章推荐
JQuery 学习笔记 选择器之四
Jul 23 Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
Oct 14 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
jquery()函数的三种语法介绍
Oct 09 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
JS高级运动实例分析
Dec 20 Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 Javascript
使用js获取伪元素的content实例
Oct 24 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
May 30 Javascript
Vue多组件仓库开发与发布详解
Feb 28 Javascript
小程序实现可拖动的悬浮按钮
Sep 07 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
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
基于PHP编程注意事项的小结
2013/04/27 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
document.compatMode介绍
2009/05/21 Javascript
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
python比较两个列表是否相等的方法
2015/07/28 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
PyQt5实现拖放功能
2018/04/25 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
少先队学雷锋活动总结范文
2014/03/09 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
通知函格式范文
2015/04/27 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
CentOS MySql8 远程连接实战
2022/04/19 MySQL
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL