跳转到主内容
新派编程网 - 新潮编程理念,全新技术课堂!

Layui弹出层layer.tips如何设置停留时间为永久显示

layer.tips 的 time 参数不生效是设计使然,其消失由 mouseout 和 click 事件驱动,不支持时间控制;需改用 layer.open({type: 1}) 或 layer.msg({time: -1, skin: 'layui-layer-tips'}) 实现常驻提示。 layer.ti ps 的 time 参数不生效?这是设计使然
layer.tips()
的
time
参数在官方文档和实际运行中 完全被忽略 ,无论你传
time: -1
、
time: 0
还是
time: 999999
,tips 层都会在鼠标移出目标元素或点击页面任意位置后立即消失。这不是 bug,而是该类型弹层的固有行为:它本质是「提示性浮层」,依赖用户交互焦点存在,不支持纯时间维度的持久化。 想让 tips 永久显示?得换 type 或手动接管 真正能“永久显示”的,只有
type: 1
(页面层)或
type: 2
(iframe 层)这类可自主控制生命周期的弹层。如果你坚持用
tips
视觉风格但要常驻: 不要用
layer.tips()
,改用
layer.open({ type: 1, ... })
手动设置
closeBtn: false
、
shadeClose: false
、
cancel: null
用
offset
和
area
模拟 tips 的定位与尺寸,例如
offset: ['20px', '100px']
若需箭头效果,得自己用 CSS 伪元素画一个,
layer.tips
的小三角是绑定在自动销毁逻辑里的,拆不开 为什么不能直接 hack layer.tips 的定时器? 因为
layer.tips
内部没有基于
setTimeout
的关闭逻辑,它的消失由两个 DOM 事件驱动:
mouseout
(目标元素)和
click
(document)。即使你通过
layer.close(index)
强制关掉再重开,也会破坏定位锚点、触发重绘抖动,且无法阻止用户点击遮罩或空白处——而
tips
默认不提供
shade: 0
或
shadeClose: false
配置项。 最简替代方案:用 msg + 自定义样式模拟 tips 外观 如果你只是想要一个带小箭头、贴着元素的常驻提示,又不想写太多 CSS: PS CS6绿色精简版 最好用的图像处理软件 下载 调用
layer.msg('内容', { time: -1, offset: 't', skin: 'layui-layer-tips' })
注意:
skin: 'layui-layer-tips'
会启用内置 tips 样式(含浅黄底色+灰色边框+小三角)
offset: 't'
让它出现在目标上方,配合
style
微调位置,例如
style: 'margin-top: -10px;'
它仍是
msg
类型,所以
time: -1
有效,且支持
closeBtn: true
和手动
layer.close()
真正容易被忽略的是:Layui 的「类型」和「行为」强绑定,想绕过某类弹层的默认交互逻辑,不是调参能解决的,得选对
type
。

相关文章