获取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 相关文章推荐
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
jquery插件格式实例分析
Jun 16 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
WebSocket实现简单客服聊天系统
May 12 Javascript
Windows安装Node.js报错:2503、2502的解决方法
Oct 25 Javascript
javaScript字符串工具类StringUtils详解
Dec 08 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 Javascript
js定时器出现第一次延迟的原因及解决方法
Jan 04 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转成EXE文件
2006/10/09 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
jquery五角星评分插件示例分享
2014/02/21 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
常用jQuery代码分享
2015/07/14 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
Agoda台湾官网:国内外订房2折起
2018/03/20 全球购物
2014年元旦活动方案
2014/02/15 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
《独坐敬亭山》教学反思
2014/04/08 职场文书
个性车贴标语
2014/06/24 职场文书
服务整改报告
2014/11/06 职场文书
个人德育工作总结
2015/03/05 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
golang 在windows中设置环境变量的操作
2021/04/29 Golang
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸