获取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 相关文章推荐
javascript中对对层的控制
Dec 29 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
window.onload和$(function(){})的区别介绍
Oct 30 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
利用jquery制作滚动到指定位置触发动画
Mar 26 Javascript
全面解析bootstrap格子布局
May 22 Javascript
Node.js的文件权限及读写flag详解
Oct 11 Javascript
webpack常用配置项配置文件介绍
Nov 07 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
vue-test-utils初使用详解
May 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
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
基于php split()函数的用法详解
2013/06/05 PHP
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
PHP中的self关键字详解
2019/06/23 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
Vue中的vue-resource示例详解
2018/11/02 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
python暴力解压rar加密文件过程详解
2019/07/05 Python
实例详解Python装饰器与闭包
2019/07/29 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
python输入中文的实例方法
2020/09/14 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
澳大利亚著名的纺织品品牌:Canningvale
2020/05/05 全球购物
2014年前台个人工作总结
2014/11/14 职场文书
协议书范文
2015/01/27 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书