【layui】多层弹出框顺序关闭问题解决

偏执的太偏执、 2023-05-29 13:14 5阅读 0赞

## 需求 ##

1.  目前有A,B,C三层页面，A弹出B页面，B弹出C页面。
2.  在C页面执行完操作后，需要将数据直接返回给A页面，并关闭C页面以及B页面。

## 实现思路 ##

1.  在A页面写一个回调方法，用于接受C页面的参数

//回调函数
        function callBack(id,name) { 
            $("#unitName").val(name);
            $("#entityId").val(id);
        }

1.  C页面执行完指定操作后，通过下述代码将参数返回给A页面，并关闭本页面(C页面)

parent.parent.callBack(json.obj,$("#name").val());
     parent.layer.closeAll();; //关闭自身

1.  B页面接收到C页面的关闭信息后，将本页面同步关闭

end:function(){ 
                    parent.layer.closeAll();
                }

## 缺陷 ##

1.  由于B页面接收C页面关闭时，并未判断C页面是执行完操作关闭，还是直接关闭。因此会导致C页面实际并没有执行操作，只是想关闭C页面的时候，B页面仍然将自己页面关闭掉了

## 优化 ##

1.  在B页面也增加回调函数callBackB()。

var needClose = false;
    	//回调函数
        function callBack(name) { 
            needClose = true
        }

1.  在B页面的end事件中，判断C页面是否回传了参数，如果回传了参数，则关闭B页面，否则允许用户留在B页面继续进行操作

end:function(){ 
            	    if (needClose) { 
                        parent.layer.closeAll();
                    }
                }

如何给layer弹出框增加end函数，请参照前一篇文章《[layUI弹出框增加回调事件][layUI]》

[layUI]: https://blog.csdn.net/xuexiiphone/article/details/102583323

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

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

相关阅读

相关【前端-layui-layer】layui弹出层闪退，layer弹出层闪退，layer弹出层坑

今天用layui的弹出层插件，发现两奇怪的问题： 1、弹窗打开事件还未绑定到任何按钮，可是点击form表单中的按钮可以打开我定义的弹出层 2、绑定弹出层到按钮，打开弹窗闪退

我不是女神ヾ/ 2023年07月05日 11:53/ 0 赞/ 15 阅读

相关【layui】多层弹出框顺序关闭问题解决

需求 1. 目前有A,B,C三层页面，A弹出B页面，B弹出C页面。 2. 在C页面执行完操作后，需要将数据直接返回给A页面，并关闭C页面以及B页面。实现思路

偏执的太偏执、/ 2023年05月29日 13:14/ 0 赞/ 6 阅读

相关 LayUi 之弹出层

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

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

相关 layui——弹出层

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

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

相关 layui 关闭当前弹出窗口

var index=parent.layer.getFrameIndex(window.name); //获取当前窗口的name

向右看齐/ 2022年05月06日 03:03/ 0 赞/ 521 阅读

相关《layUI 弹出层 and 按钮》

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"

亦凉/ 2022年04月17日 02:12/ 0 赞/ 461 阅读

相关 layui 关闭弹出框

作者：TROY\_Musou 原文：[https://blog.csdn.net/troy\_musou/article/details/73499459][https_b

快来打我*/ 2022年04月03日 13:40/ 0 赞/ 430 阅读

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

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

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

相关 Layui的弹出层

1：先在HTML页面上放一个button按钮，给按钮ID，设置样式，按钮的作用就是弹出layui的open层： <button|type=“button”|id="O

逃离我推掉我的手/ 2022年01月22日 03:09/ 0 赞/ 832 阅读

相关 Layui 弹出层插件

Layui 弹出层插件开发工具与关键技术： Visual Studio 2015 – Layui 作者：廖亚星撰写时间：2019年 6 月4日这段时间在做项

蔚落/ 2022年01月22日 03:05/ 0 赞/ 498 阅读