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

layui弹窗怎么让layer.msg不自动消失直到手动点击

阿墨同学_8233

阿墨同学_8233

发布时间:2026-10-22 06:29:26

|

910人浏览过

|

来源于php中文网

原创

要让 layer.msg 永不自动关闭且支持点击关闭,需显式设置 time: 0、shade: [0.2, '#000'] 和 shadeClose: true;若需点击文字关闭,则用 layer.open(type: 0) 并在 success 中绑定 click 事件调用 layer.close;跳转场景须用 requestAnimationFrame 确保 DOM 渲染后绑定 onclick。

layui弹窗怎么让layer.msg不自动消失直到手动点击

要在 layui 中让 layer.msg 提示框一直显示、不自动关闭,直到用户手动点击才消失,必须明确避开默认行为陷阱——因为 layui 2.8+ 版本中 【time 参数不显式传入时默认为 0,即永不关闭】,但很多人误以为“不写 time 就会 3 秒关”,结果加了 time: 0 反而冗余,或漏配 shadeClose 导致无法点击关闭。

设置永不自动关闭 + 点击遮罩关闭

第一步:调用 layer.msg 时显式传入 time: 0,并启用遮罩与遮罩点击关闭功能
layer.msg('操作已完成,请点击任意处继续', { time: 0, shade: [0.2, '#000'], shadeClose: true });
这一步最关键:shade 必须用数组格式 [透明度, 颜色],单写 shade: 0.2 在 2.8+ 中大概率失效;shadeClose: true 仅在 shade 存在时才起效。

第二步:确保遮罩层可点击
若页面已有其他遮罩(如 modal 叠加)、或遮罩透明度低于 0.1,点击将无响应。实测透明度 ≥ 0.2 才有稳定点击灵敏度。

点击提示框内容本身关闭(非遮罩)

layer.msg 原生不支持点击文字区域关闭,必须用 layer.open 模拟并手动绑定事件:

方法一:用 type: 0 模拟 msg 样式,绑定 click 关闭

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

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

下载

const index = layer.open({
  type: 0,
  content: '点击此处关闭提示',
  time: 0,
  closeBtn: 0,
  skin: 'layui-layer-msg',
  success: function(layero) {
    layero.on('click', function() { layer.close(index); });
  }
});

注意:不能在 success 外部用 var index = layer.open(...) 后再 layero.on,因为 layero 是 DOM 元素,需在 success 内实时绑定;【layer.index 在 success 中不可靠,必须用传入的 index 变量】。

点击后跳转页面(带手动控制)

如果目标是点击提示后跳转,不要在 layer.msg 的 end 回调里跳转——它只在关闭后触发,而你要求“点击即跳”:

layer.msg('登录成功,点击进入后台', {
  time: 0,
  shade: [0.15, '#000'],
  shadeClose: false // 关闭遮罩点击,避免干扰
});
requestAnimationFrame(() => {
  const msgEl = document.querySelector('.layui-layer-msg');
  if (msgEl) msgEl.onclick = () => location.href = '/admin';
});

这一步必须用 requestAnimationFrame,否则 .layui-layer-msg 元素可能尚未挂载到 DOM,querySelector 查不到。

热门AI工具

更多
豆包大模型

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

DeepSeek

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

讯飞绘文

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

WorkBuddy

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

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

PixPix
PixPix Hot

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

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

切问学术

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

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

相关专题

更多
PHP2Shell高危漏洞修复教程
PHP2Shell高危漏洞修复教程

PHP2Shell漏洞是什么,哪些PHP版本和运行环境会受到影响,服务器应该如何检测与修复?本专题提供版本自查脚本、Linux与Docker升级命令、PHP-FPM和Apache排查步骤,以及修复验证、临时缓解和应急响应方案。

0

2026.10.22

剧云人物设定与关系管理教程
剧云人物设定与关系管理教程

本专题介绍剧云人物设定与关系管理,讲解角色小传、性格职业、人物目标、背景资料和关系网络的创建及维护方法。

0

2026.10.22

剧云故事大纲与分场规划教程
剧云故事大纲与分场规划教程

本专题讲解剧云梗概与多级大纲功能,覆盖全局、分集、分场结构生成,以及主线冲突、剧情节点和场次顺序调整。

0

2026.10.22

VibeKnow PPT讲解视频教程汇总
VibeKnow PPT讲解视频教程汇总

本专题介绍VibeKnow PPT讲解模式的素材准备、旁白生成、页面节奏、画面呈现与导出设置,适合课程和培训场景。

0

2026.10.22

VibeKnow PDF转视频教程合集
VibeKnow PDF转视频教程合集

本专题围绕VibeKnow的PDF转视频功能,讲解文件准备、内容解析、脚本生成、重点可视化及配音字幕检查方法。

0

2026.10.22

二狗PPT模板与视觉设计
二狗PPT模板与视觉设计

本专题介绍二狗PPT的职场模板、主题风格与页面版式,覆盖模板切换、色彩选择、内容匹配和正式汇报场景下的视觉优化方法。

0

2026.10.22

php漏洞修复方法
php漏洞修复方法

PHP漏洞聚合专题,持续整理PHP最新高危漏洞、CVE安全预警、受影响版本、自查命令及修复方案,覆盖PHP-FPM、Docker、Ubuntu与Linux服务器环境,帮助开发者快速完成漏洞排查、版本升级和安全加固。

20

2026.10.22

二狗PPT入门与基础操作
二狗PPT入门与基础操作

本专题整理二狗PPT从官网进入、输入主题、生成大纲到制作成稿的基础操作,帮助新手掌握AI一键生成职场PPT的完整流程。

0

2026.10.22

讯飞绘文AI配图与绘图模型合集
讯飞绘文AI配图与绘图模型合集

本专题讲解讯飞绘文AI配图与绘图2.0 Pro,覆盖提示词、画面比例、参考图、风格选择及图片优化,帮助用户制作匹配内容的视觉素材。

0

2026.10.22

热门下载

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

精品课程

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

共87课时 | 13万人学习

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

共89课时 | 11.2万人学习

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

共5课时 | 1.6万人学习

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

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