layer弹窗分为:PC和WAP,引入的方式也很简单,只是数不熟练的问题,直接看官网的教程即可。layer.layui.com
PC端的功能很强大,而相比于手机端,功能弱了不少,可能都需要自己来定制吧,比较麻烦。而且感觉效果也没PC端直接。
项目里的手机端,使用了layer-mobile,但是感觉样式还不如pc好看,更能也少。而PC的layer,在手机端,展示貌似也没问题,所以,打算wap端全部使用pc的layer来替换掉。
之前总结了下wap端的文档,代码里打算删除,这里笔记一下:
layer-mobile参数对象:
type - 类型。0-信息框|1-页面层|2-加载层
content - 内容
title - 标题(空-不展示|string-标题内容|array-标题&样式(['我是标题', 'background-color: #eee;']))
time - 自动关闭秒数。默认不开启
style - 自定义层的样式
style: 'border:none; background-color:#78BA32; color:#fff;'
skin - 弹层显示风格(footer-底部对话框|msg-普通提示)
className - 自定义一个css类。这样,可以在css中控制 '弹层的样式'(和style功能相似,不用写在html文件内了,统一抽离到css中)
btn - 按钮(空-无按钮|string-1个按钮|array-2个按钮(btn:['取消', '确定']))
anim - 动画(scale-默认|up-从下往上弹出|false-不启用动画)
shadow - 遮罩(true-显示遮罩(默认)|false-不显示遮罩|string-遮罩风格(background-color:#ccc;))
shadeClose - 是否点击遮罩时,关闭层(true-默认|false)
fixed - 是否固定层(true-默认|false)
top - 控制层的纵坐标
success - 成功弹出层,回调函数 function(elem){} // elem - 当前层元素对象
yes - 确定按钮触发的回调函数 function(index){} // index - 当前层索引
no - 取消按钮触发的回调函数 function(index){} // index - 当前层索引
end - 层彻底销毁的回调函数 function(index){} // index - 当前层索引
内置方法/属性
layer.v - layer-mobile 版本号
layer.close(index) - 关闭特定层
layer.closeAll() - 关闭所有层