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

梦里梦外; 2023-08-17 16:51 128阅读 0赞

# 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 条评论，128人围观）

还没有评论，来说两句吧...

相关阅读

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

Layui弹出层的使用最近开发中使用到点击按钮，弹出小窗口，并在父窗口页面所在js调用子窗口页面所在js的方法，并关闭子窗口，把方法的返回值绑定到子窗口页面input框

梦里梦外;/ 2023年08月17日 16:51/ 0 赞/ 129 阅读

相关一层弹出层、两层弹出层、三层弹出层、多层弹出层随便搞

最近因为一些比较扯的需求，在项目中需要用到多层弹出层，话不多说，先看一下效果：![在这里插入图片描述][20200213212407576.gif] 使用情景：第一层

素颜马尾好姑娘i/ 2023年07月05日 10:17/ 0 赞/ 29 阅读

相关 layui弹出层

layer.open({ type: 1, title: "项目人员分配", area: ['50%',

雨点打透心脏的1/2处/ 2023年03月13日 13:18/ 0 赞/ 21 阅读

相关 layer弹出层关闭后刷新父页面

window.parent.location.reload(); //刷新父页面 var index = parent.layer.getFrameI

亦凉/ 2022年06月04日 01:25/ 0 赞/ 262 阅读

相关 layui弹出层闪退，layer弹出层闪退，layer弹出层坑

转载: http://www.mamicode.com/info-detail-1654730.html 今天用layui的弹出层插件，发现两奇怪的问题： 1、弹窗打开事

桃扇骨/ 2022年05月22日 04:30/ 1 赞/ 475 阅读

相关 layui关闭iframe弹出层后刷新父级页面

需求：点击按钮->弹出iframe窗体->在iframe中的列表中选区需要的用户条目->确认并关闭窗体->在父级窗体中显示刚才选取的用户（刷新）。 layer.ope

以你之姓@/ 2022年05月21日 11:55/ 0 赞/ 991 阅读

相关 LayUi 之弹出层

这个东西应该不是很难，用到的东西也不是很多，但是弹出层却是贤心的一大亮点，所以我们还是有必要重视一下，哈哈~ 弹出层所涉及到的东西还是很多的，就比如蒙层啊，双层弹出框，

客官°小女子只卖身不卖艺/ 2022年05月20日 04:27/ 0 赞/ 395 阅读

相关 layui——弹出层

$("createUser").click(function () { layer.open({ type:2

梦里梦外;/ 2022年05月12日 14:04/ 0 赞/ 390 阅读

相关 Layui如何在弹出的页面层关闭之后刷新父级页面

见代码 layer.open({ type : 2, area : [ w + 'px', h + 'px' ],

谁借莪１个温暖的怀抱￠/ 2022年04月11日 04:14/ 0 赞/ 1377 阅读

相关 layui关闭弹出层刷新父页面

当layui关闭弹出层时会调用layer.open()方法的end属性然后刷新代码就写在这个属性里面 layer.open({ type: 2,

Love The Way You Lie/ 2022年03月27日 01:52/ 0 赞/ 588 阅读