layui 弹框关闭刷新 window 双层父子弹窗交互

最新推荐文章于 2025-09-14 16:06:08 发布

原创

最新推荐文章于 2025-09-14 16:06:08 发布 · 2.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#layui弹层

这篇博客介绍了layui弹层组件的弹窗之美，并着重讨论了如何实现iframe窗的弹出与关闭，特别是在处理父子弹窗交互时的关键代码，帮助开发者解决在实际使用中遇到的难题。

弹层之美

在线调试扩展皮肤
layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。

在与同类组件的比较中，layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性，正因如此，越来越多的开发者将媚眼投上了layer（已被6174983人次关注）。layer 甚至兼容了包括 IE6 在内的所有主流浏览器。她数量可观的接口，使得您可以自定义太多您需要的风格，每一种弹层模式各具特色，广受欢迎。当然，这种“王婆卖瓜”的陈述听起来总是有点难受，因此你需要进一步了解她是否真的如你所愿。

直到今天我才了解了它看懂了弹层之美开玩笑哈哈哈，说实话官方文档太坑人入门级的代码实例少之又少！社区更是垃圾一群键盘侠只提供所谓的思路！

直入正题

<!-- layui切换弹框 -->
    <div class="topFooter">
        <a onclick="goregisterzc()" class="fl"&g

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

kingrome2009

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【Layui】关闭当前页面并刷新父页面

德仔

07-06

5777

// 关闭当前页面并刷新父页面 var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); window.parent.location.reload();

前端面试题2024/9/23（偏八股文--高频）

qq_46617150的博客

10-11

1177

路由就是路径，后端的每一个路由指向一个实现逻辑前端的每一个路由指向一个页面组件flex布局又称弹性布局，指子项目在父容器剩余空间内的占比。要是想开启flex布局，只需要在父容器样式里面加上display：flex即可。举例说明：比如我按照需要写一个统计累加1到100，一般来说我会定义一个count还统计数值，后面写一个函数来返回1到100的累加值。但是这个count是在统计函数外面的，如果在外部改变了这个count的值，那么这个统计函数也会出错，所以我们会在外面再包一层函数。

参与评论您还未登录，请先登录后发表或查看评论

layui 在一个弹窗中点击某一按钮再次弹一个窗口并将第一个窗口关闭

Devil_Forever的博客

09-04

2238

var index=parent.layer.getFrameIndex(window.name); //获取当前窗口的name parent.layer.close(index); //关闭第一个窗口 parent.layer.open({ //打开第二个窗口 //… });

Layer、LayUI

2301_79704601的博客

09-14

569

关系：Layer 最初是 LayUI 的内置组件，后来被分离为独立库，可单独引入到任何项目中（不依赖 LayUI）。定位：经典的前端 UI 框架，由国人开发，主打 “极简模块化”，适合快速构建后台管理系统、企业级 Web 界面。基于 jQuery，提供了丰富的 UI 组件（表格、表单、弹窗、导航等），开箱即用。定位：独立的 Web 弹窗组件，是 LayUI 的 “核心成员”，也可单独使用。支持多种弹窗类型（信息提示、页面层、iframe 层、加载层等）。文档简洁，中文支持友好，学习成本低。

layui关闭二级弹窗

EUGL的博客

06-14

506

/获取当前窗口的name。

layui如何存在多个弹窗_layUI 几个简单的弹出层

weixin_33168937的博客

01-14

1205

导入控件主题创建容器也就是包含jsTree控件的元素，一般使用就可以了。引入jQueryjsTree依赖于jQuery，所以需要引入jQuery：引入jsTree部署环境使用压缩版的jsTree.min.js，如果是开发环境可以使用jsTree.js创建jsTree实例DOM加载完毕之后，就可以创建jsTree实例对象了。$(function () { $('#jstree_demo_div')....

layui关闭弹出层子页面后刷新父页面实现

weixin_40800572的博客

11-29

1392

1、在父页面定义一个变量来判断是否需要刷新 var reload_flag = 0; 2、在子页面中修改该变量的值 parent.reload_flag = 1; 3、在父页面的弹出层关闭时通过该变量的值判断是滞需要刷新，使用layer.open的end事件 layer.open({ type: 2, title: '编辑', ...

// 主程序入口 auto.waitFor(); main(); // 全局变量 let floatyButton = null; // 悬浮按钮 let floatyWindow = null; // 全屏悬浮窗 let clickCount = 0; // 点击计数器 let lastClickTime = 0; // 上次点击时间 let volumeKeyListener = null; // 音量键监听器 function main() { // 检查并请求权限 if (!requestPermissions()) { toast("请授予必要的权限"); exit(); } // 创建悬浮按钮 createFloatyButton(); // 注册音量键监听 registerVolumeKeyListener(); } // 请求必要权限 function requestPermissions() { // 检查无障碍服务 if (!auto.service) { toast("请先开启无障碍服务"); auto.waitFor(); return false; } // 在Auto.js 6.x中，悬浮窗权限检查方式不同 // 尝试创建悬浮窗来检测权限 try { let testWindow = floaty.rawWindow(<frame></frame>); testWindow.close(); return true; } catch (e) { // 如果没有权限，提示用户 toast("请授予悬浮窗权限"); // 在Auto.js 6.x中，需要手动在设置中开启悬浮窗权限 alert("权限提示", "请在设置中为Auto.js开启悬浮窗权限"); return false; } } // 创建悬浮按钮 function createFloatyButton() { if (floatyButton) { floatyButton.close(); } floatyButton = floaty.window( <frame gravity="center" bg="#AA00FF00"> <button id="btn" text="悬浮按钮" w="80" h="40" bg="#FF2196F3" textColor="white"/> </frame> ); // 设置悬浮按钮位置 floatyButton.setPosition(device.width - 200, device.height / 2); // 悬浮按钮点击事件 floatyButton.btn.click(() => { showFloatyWindow(); }); } // 显示全屏悬浮窗 function showFloatyWindow() { // 隐藏悬浮按钮 if (floatyButton) { floatyButton.close(); floatyButton = null; } // 创建全屏悬浮窗 floatyWindow = floaty.rawWindow( <frame bg="#99000000" id="root"> <linear gravity="center" orientation="vertical"> <button id="centerBtn" text="点击5次退出\n(点击计数: 0)" w="200" h="100" bg="#FF4CAF50" textColor="white" textSize="16"/> <text id="hint" text="或者按音量减键退出" textColor="#FFFFFF" textSize="14" marginTop="20"/> </linear> </frame> ); // 设置全屏 floatyWindow.setSize(device.width, device.height); // 中间按钮点击事件 clickCount = 0; floatyWindow.centerBtn.click(() => { handleCenterButtonClick(); }); // 在Auto.js 6.x中，拦截触摸事件的方式 // 设置根布局的触摸监听器 floatyWindow.root.setOnTouchListener(function(view, event) { // 返回true表示消费事件，阻止传递到底层应用 return true; }); } // 处理中间按钮点击 function handleCenterButtonClick() { let currentTime = new Date().getTime(); // 检查是否在2秒内连续点击 if (currentTime - lastClickTime > 2000) { clickCount = 0; // 重置计数 } clickCount++; lastClickTime = currentTime; // 更新按钮文本 floatyWindow.centerBtn.setText("点击5次退出\n(点击计数: " + clickCount + ")"); // 检查是否达到5次点击 if (clickCount >= 5) { exitFloatyWindow(); } // 2秒后重置计数（如果后续没有点击） threads.start(function() { sleep(2000); let now = new Date().getTime(); if (now - lastClickTime >= 2000) { clickCount = 0; if (floatyWindow && floatyWindow.centerBtn) { ui.run(() => { floatyWindow.centerBtn.setText("点击5次退出\n(点击计数: 0)"); }); } } }); } // 注册音量键监听 function registerVolumeKeyListener() { // 移除之前可能存在的监听器 if (volumeKeyListener) { events.removeAllListeners("key_down"); } // 音量下键监听 events.observeKey(); events.on("key_down", function(keyCode, event) { if (keyCode === events.KEYCODE_VOLUME_DOWN && floatyWindow) { exitFloatyWindow(); // 在Auto.js 6.x中，不能使用preventDefault，但可以尝试消费事件 // 通过返回true来尝试消费事件 return true; } }); } // 退出全屏悬浮窗 function exitFloatyWindow() { if (floatyWindow) { floatyWindow.close(); floatyWindow = null; } // 重新显示悬浮按钮 createFloatyButton(); toast("已退出全屏模式"); } // 脚本退出时的清理工作 function cleanup() { if (floatyButton) { floatyButton.close(); } if (floatyWindow) { floatyWindow.close(); } // 移除按键监听 events.removeAllListeners("key_down"); } // 注册脚本退出事件 events.on("exit", cleanup); 优化

layui 弹框 关闭刷新 window 双层父子弹窗交互

弹层之美

直入正题

layui 弹框关闭刷新 window 双层父子弹窗交互