Layui弹出层在父级中调用子弹出层方法,只关闭子弹出层不关闭父弹出层

Layui弹出层的使用

最近开发中使用到点击按钮,弹出小窗口,并在父窗口页面所在js调用子窗口页面所在js的方法,并关闭子窗口,把方法的返回值绑定到子窗口页面input框字段中的功能,在这里总结一下,以便节省此后再次实现此功能时的开发时间。

一、引入js、css
<script src="/static/build/layui.js"></script>
 <link rel="stylesheet" href="/static/build/layui.css" media="all">
二、按钮触发的打开弹层事件
   function integralSchemeList(){
      var integralSchemeListUrl = prefix+"/integralScheme";
          layer.open({
              id:'integralScheme',
              type: 2,
              area: ['80%','80%'],
              fix: false,
              //不固定
              maxmin: true,
              shade: 0.3,
              title: '积分模板',
              content:integralSchemeListUrl,
              btn: ['确定', '关闭'],
              // 弹层外区域关闭
              shadeClose: true,
               yes: function(index){
                  var frameId=document.getElementById('integralScheme').getElementsByTagName("iframe")[0].id;//根据弹层id获取子页面对象
                  var arrays=$('#'+frameId)[0].contentWindow.checkItem();//调用子页面checkItem()方法
                  if(arrays.length>0){
                      var integralSchemeIdName='';
                      var integralSchemeId='';
                      arrays.forEach(function(val,index){
                          integralSchemeIdName+=val.name+',';
                          integralSchemeId+=val.id+',';
                      })
                      if(integralSchemeIdName.length>0){
                         integralSchemeIdName=integralSchemeIdName.substr(0,integralSchemeIdName.length-1);
                          $("#integralSchemeIdName").val(integralSchemeIdName);//将方法执行的返回值绑定到input输入框
                      }
                      if(integralSchemeId.length>0){
                          integralSchemeId=integralSchemeId.substr(0,integralSchemeId.length-1);
                          $("#integralSchemeId").val(integralSchemeId);
                      }
                      layer.close(index); //仅关闭当前子页面不关闭父页面
                  }else{
                      alert("至少选择一条模板才可进行确定操作!");
                  }
               },
              cancel: function(index) {
                  return true;
              }
          });
    }

子页面方法:

 function checkItem(){
       var arrays = $.btTable.bootstrapTable('getSelections');
      return arrays;
   }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值