讲师中心 微信公众号
AI工具推荐 视频效率加速

Layui如何监听layer弹窗在全屏和窗口模式之间的切换

酷墨酱_5253

酷墨酱_5253

发布时间:2026-04-14 09:45:34

|

860人浏览过

|

来源于php中文网

原创

layer全屏/还原操作不触发window.resize事件,需用full/restore回调并手动维护isFullscreen状态,手动调用layer.full()时需同步更新状态并延时重算尺寸。

layer全屏切换时没有触发resize事件?

layer 的全屏/还原操作本身不触发 window.onresize,也不是标准 dom resize 事件源。你监听不到,不是代码写错了,是 layer 自己没抛——它只在内部改了 style 和 class,没 dispatchevent。

实操建议:

  • 别依赖 window.addEventListener('resize', ...) 捕获 layer 全屏切换
  • 改用 layer 提供的 full 和 min 回调(注意:不是 success 或 end)
  • 这两个回调只在用户点击全屏/最小化按钮时触发,不适用于手动调用 layer.full(index) 后再还原的场景(此时需自行补逻辑)

如何在 full/min 回调里拿到当前弹窗状态?

layer 不提供现成的「当前是否全屏」API,layer.full(index) 和 layer.restore(index) 是命令式调用,无返回值。你需要自己维护状态。

实操建议:

  • 在打开弹窗时用一个变量或 data 属性记录初始状态:let isFullscreen = false;
  • 在 full 回调里设为 true,在 min 回调里设为 false(注意:min 不等于还原,而是最小化;真正还原对应的是 restore 回调)
  • layer 2.8+ 支持 restore 回调,但仅当用户点击「还原」按钮时触发;若用户拖拽窗口大小导致退出全屏,则仍不会触发任何回调

示例片段:

layer.open({
  type: 1,
  content: '<div>test</div>',
  full: function(layero) {
    isFullscreen = true;
    console.log('已全屏');
  },
  restore: function(layero) {
    isFullscreen = false;
    console.log('已还原');
  }
});

手动触发全屏后怎么同步状态?

用 layer.full(index) 或 layer.restore(index) 主动控制时,full/restore 回调并不会执行——这是 layer 的设计缺陷,文档也没说明。

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

实操建议:

  • 每次手动调用前,先同步更新你的状态变量:isFullscreen = true; layer.full(index);
  • 如果需要响应式重绘(比如调整内部 iframe 高度),在调用后加个 setTimeout(() => { /* 重算尺寸 */ }, 10),因为 layer 的 DOM 更新是异步的
  • 避免在 full 回调里再调一次 layer.full(index),会引发重复全屏或样式错乱

兼容性与 DOM 更新时机问题

layer 全屏本质是给弹窗容器加 layui-layer-full class 并设置 top/left/width/height 为 0/0/100%/100%,但这个过程在不同浏览器中渲染节奏不一致,尤其在 iframe 弹窗里容易拿不到最新尺寸。

实操建议:

  • 不要在 full 回调里直接读 layero.width(),应改用 layero.find('.layui-layer-content') 再算内部高度
  • Chrome 下可能需等 requestAnimationFrame 才能读到真实尺寸;Firefox 下有时要等两个 tick
  • 移动端 Safari 对 vh 计算异常,全屏后建议用 document.documentElement.clientHeight 而非 window.innerHeight

事情说清了就结束。最麻烦的其实是「用户拖拽退出全屏」这种行为——layer 完全不监听,也没暴露底层 resize hook,只能靠轮询 getComputedStyle(layero[0]).width 或监听 document 的 visibilitychange 做兜底,但这已经超出 layer 原生能力范围了。

热门AI工具

更多
DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2343

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

5043

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6130

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

5658

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

803

2024.05.22

FrankenPHP集成Laravel详细教程
FrankenPHP集成Laravel详细教程

本专题提供FrankenPHP集成Laravel的详细配置指南,全面解析运行原理、开发环境搭建、Caddyfile配置、Octane工作模式、数据库连接、队列任务、定时任务和生产环境优化,解决部署过程中常见的报错与兼容性问题。

40

2026.10.08

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

140

2026.09.30

LLVM RISC-V参数配置教程
LLVM RISC-V参数配置教程

本专题介绍LLVM对RISC-V基础ISA和扩展的支持方式,涵盖RV32、RV64、标准扩展、实验性扩展、厂商扩展、-menable-experimental-extensions和版本差异。

120

2026.09.30

LLVM IR中间表示入门指南
LLVM IR中间表示入门指南

本专题整理LLVM IR的核心概念,包括中间表示作用、模块结构、函数、基本块、SSA形式、类型系统和常见语法,帮助新手理解LLVM编译流程中的关键层。

100

2026.09.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.8万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn