基于layer.js实现收货地址弹框选择然后返回相应的地址信息

先给大家展示下效果图：



核心代码如下所示：

(‘.selectaddress').click(function () {//图一联系方式中的点击事件
    top.layer.open({
      id: “layer_say_hello”,
      type: 2,
      title: ‘请点击选择联系地址',
      shadeClose: true,
      shade: 0.8,
      area: [‘300px', ‘400px'],
      content: “{:Url(‘/mobile/user/address_list')}”, //iframe的url
      success: function (layero, index) {
//        var jquerySendHelloButton =(“.addre span”, layero.find(“iframe”)[0].contentWindow.document);
var jquerySendHelloButton = (“.listdetail”,layero.find(“iframe”)[0].contentWindow.document);(jquerySendHelloButton).click(function () {
var addressid = (this).find(‘.addressId′).val();varconsignee=(this).find(‘.contact span').eq(0).text();
var phone = (this).find(‘.contactspan′).eq(1).text();varaddre=(this).find(‘.addre span').text();
(‘.contactspan′).eq(0).text(consignee);(‘.contact span').eq(1).text(phone);
(‘.addrespan′).eq(0).text(addre);(‘input[name=address_id]').val(addressid);
(‘.selec′).css(‘display′,′none′);(‘.demand_add').css(‘display','block');
layer.close(index);
})
      //传入参数，并赋值给iframe的元素
    }
  });
})

以上所述是小编给大家介绍的基于layer.js实现收货地址弹框选择然后返回相应的地址信息，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 轻松实现js弹框显示选项

    轻松实现js弹框显示选项

    先看看效果: 效果 -点击弹出弹框 -点击复选框,已选div中 显示已选中的选项 -再次点击取消选中状态,已选div中 显示的选中选项取消显示 -点击 已选 div中的 选项x图标,取消显示该选项 ,取消相应复选框选中状态​ -点击大类,小类取消选中状态,点击小类,选中大类取消选中状态 -最多3个选项可以被选中 -点击x图标关闭弹框 -点击确定按钮显示选择后的结果 代码块 html片段代码 <div class="one_search clearfix"> <labe

  • javascript实现无法关闭的弹框

    大家都见过某网页中的恶意广告,你关闭了又出来了!为何,JS来告诉你 HTML <body> <h3 class="whiteColor">无法关闭的弹框,打不死的小强!</h3> <div id="middleBox"> <a href="javascript:;" class="close_btn" id="closeBtn"><img s

  • js实现上下左右弹框划出效果

    js实现上下左右弹框划出效果

    效果图: 图(1)初始图 图(2)点击"从右侧划出" 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,

  • struts json 类型异常返回到js弹框问题解决办法

    struts json 类型异常返回到js弹框问题解决办法 当struts 框架配置了异常时 例如: <package name="sysCnn" namespace="/" extends="json-default"> <global-results> <result name="error">/WEB-INF/pages/error.jsp</result> <res

  • Bootstrap和Angularjs配合自制弹框的实例代码

    指令 directive('bsPopup', function ($parse) { return { require: 'ngModel', restrict: 'A', link: function (scope, elem, attrs, ctrl) { scope.$watch(function () { return $parse(ctrl.$modelValue)(scope); }, function (newValue) { if (newValue ==0) { $(elem

  • js自定义弹框插件的封装

    js自定义弹框插件的封装

    弹出层提示信息,这是移动前端开发中最常见的需求,你可能会想到一些流行的弹框插件,比如 经典的artDialog 炫酷的Sweetalert等等.. 但是慢慢地你其实会发现通常情况下需求定制化要求较高,一般的弹框插件可能只满足大部分要求,自定义花的时间还不如手动自己封装一个符合自己开发习惯的弹框组件,这样后续开发效率将大大提高. 首先整理一下思路,原生javascript其实是有实现alert()方法的,但是那个会暂时性中断程序运行,并且足以让你丑拒!那么抛开这些细细一想,其实弹框就是两个div层

  • 基于layer.js实现收货地址弹框选择然后返回相应的地址信息

    基于layer.js实现收货地址弹框选择然后返回相应的地址信息

    先给大家展示下效果图: 核心代码如下所示: ('.selectaddress').click(function () {//图一联系方式中的点击事件 top.layer.open({ id: "layer_say_hello", type: 2, title: '请点击选择联系地址', shadeClose: true, shade: 0.8, area: ['300px', '400px'], content: "{:Url('/mobile/user/address_li

  • 基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析

    基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析

    之前有分享一个vue2.x移动端弹框组件,今天给大家带来的是Vue3实现自定义弹框组件. V3Popup 基于vue3.x实现的移动端弹出框组件,集合msg.alert.dialog.modal.actionSheet.toast等多种效果.支持20+种自定义参数配置,旨在通过极简的布局.精简的调用方式解决多样化的弹框场景. v3popup 在开发之初参考借鉴了Vant3.ElementPlus等组件化思想.并且功能效果和之前vue2.0保持一致. ◆ 快速引入 在main.js中全局引入v3p

  • 基于Vue.js 2.0实现百度搜索框效果

    使用Vue.js 2.0 模仿百度搜索框效果,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=2.0, maximum-scale=1.0, minimum

  • JS 实现列表与多选框选择附预览动画

    JS 实现列表与多选框选择附预览动画

    1功能预览 2html代码 <span> <tr> <td><img onclick="addType()" src="${msUrl}/images/logo/add.png">产品范围:</td> <td><select id="selectTypeOne" class="easyui-combobox" data-options="r

  • 关于layer.js使用心得-向弹出框传值问题

    目录 layer.js使用心得-向弹出框传值 问题背景 问题描述 问题分析 layui传值的一些经验,也没怎么整理:表格渲染数据,弹出框 1.layui向表格渲染数据的格式转换 2. layui弹出框,并且在表格里选中 layer.js使用心得-向弹出框传值 问题背景 实现弹出对话框加载页面,所以我选择了独立组件layer.js. 基于layer.js组件弹出了一个新的iframe的窗口(假设name为LayerFrame,方便后面称呼),但需要从之前的页面传入参数 注:'#sayHello'元

  • JS消息弹框alert、confirm、prompt的实现代码

    alert 消息提示框: 用于警告,只有确定按钮. alert(str); confirm 消息对话框: 通过返回值可以判断用户点击了什么按钮 . confirm(str); 当用户点击"确定"按钮时,返回true.当用户点击"取消"按钮时,返回false. prompt()消息输入框: 弹框中包含一个输入框和确认取消按钮,用户可以在输入框输入内容. var reason = window.prompt("请输入审核不通过理由:", "

  • Layui弹框中数据表格中可双击选择一条数据的实现

    Layui提供的功能如下(预览) 可自行查看:layui官网此模块的链接 着急看双击选中 直接看标黄色部分 假设这是个弹窗里的表格和数据点击圆圈,圆圈变绿则为选中,选中后点击上方查看数据按钮(实际中是确认按钮,实际中点击确认按钮后会关闭弹窗并把json串带到原本页面中) Layui提供的代码如下(查看代码) <body> <!-- 表格空架子 --> <table class="layui-hide" id="test" lay-fil

  • vue自定义全局组件实现弹框案例

    vue自定义全局组件实现弹框案例

    本文实例为大家分享了vue自定义全局组件实现弹框案例的具体代码,供大家参考,具体内容如下 说明:本案例是封装的一个弹框页面,因为只想要一个遮罩,内容自定义.因为ElementUI上已经提供了一个弹框组件,但觉得elementUI的组件内容有点多,所有自己就封装了全局组件.自己封装的参考了elementUI组件的源码. 主要步骤如下 1.创建一个文件夹my-dialog2.在my-dialog文件夹下创建MyDialog.vue和index.js3.index.js需要引入MyDiloag并封装和

  • 基于vue.js仿淘宝收货地址并设置默认地址的案例分析

    基于vue.js仿淘宝收货地址并设置默认地址的案例分析

    这个案例主要是渲染地址列表,然后设置默认地址,与淘宝的收货地址功能一样,具体自行查看自己的淘宝收货地址: 效果图: html结构 <!--the-address--> <div class="the-address"> <div class="adr-tent" id="vue-address"> <table class="adr-table"> <thead class

  • nodejs调取微信收货地址的方法

    本文实例为大家分享了nodejs调取微信收货地址的具体代码,供大家参考,具体内容如下 公众号调取微信收货地址条件: 1.微信调取收货地址API,公众号必须有支付权限. 2.配置对应使用收货地址功能的域名(域名配置请在公众平台网站-->开发者中心-->配置项-->网页服务-->网页授权获取用户基本信息中设置,) router.js var API = require('wechat-api'); var api = new API(config.wx_appid, config.wx

随机推荐