alertmsg 变量值_layer弹出层框架alert与msg详解

<div style="font-size:16px;">
layer--->web弹层组件
<img alt="a7708f6d52dbef837aef1334e38fbe79.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-1cc87098448d9e66aeeacce65df05f57.png">
<img alt="b39d88bb7c0a4930444383fc42ca72cb.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-7c929535d95b9446629ae5538eb3927f.png">
<img alt="7102a266c1d0899f1b63cfaf6ab970b2.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-4e5b4c7885e220df96d9b20fb704f1bf.png">
<img alt="bc365122c35105a7804c564a79db21a7.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-d7910038fec553c9bc186ddea2b79756.png">
<img alt="9afd7ce6357cba41ff824a2f574e605f.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-92d82d55db3c29dc53334160aefdfbbc.png">
<img alt="a06e56c708a77e23c5316751b8269539.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-cdc301d181601dae24b6a0fcb8485816.png">
代码:
1 layer.alert('见到你真的很高兴', {icon: 6});
这是一个最简单的弹出层,可根据icon配置左边的图标
通常情况下,除了弹窗之外我们一般都会有对按钮做回调处理的一些操作
如图:
<img alt="f38b6c6e907819bf88c33f3b28830e0b.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-8997c831e3e626df88500421b00b96d7.png">
1 layer.alert('墨绿风格，点击确认看深蓝', {
2 skin: 'layui-layer-molv' //样式类名自定义样式
3 ,closeBtn: 1 // 是否显示关闭按钮
4 ,anim: 1 //动画类型
5 ,btn: ['重要','奇葩'] //按钮
6 ,icon: 6 // icon
7 ,yes:function(){
8 layer.msg('按钮1')
9 }
10 ,btn2:function(){
11 layer.msg('按钮2')
12 }});
13
<img alt="d16c39a5a76edf4577048cf53526d1e4.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-54d993be52ffb273f64a3c7704ddba57.png">
<img alt="a4b5c0e4fd1b5beeb1e1ad8ece0e7c4b.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-0022c315426a96fedad419f26412852d.png">
code:
1 layer.msg('大部分参数都是可以公用的 合理搭配，展示不一样的风格', {
2 time: 2000, //2s后自动关闭
3 btn: ['明白了', '知道了', '哦']
4 });
回调的例子:
<img alt="ef68c488ea9f43b39db03ee4d8782031.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-a60fc7defd5cfbac1237f6ddebfdb8ab.png">
<img alt="1349a3ca53e1ede8f8998702e9505380.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-99c731a22a5568c87b2c608ba24fc237.png">
code:
1 layer.msg('也可以这样', {
2 btn: ['明白了', '知道了']
3 ,yes: function(index, layero){
4 layer.msg("按钮1回调,参数是:"+index)
5 }
6 ,btn2: function(index, layero){
7 //按钮【按钮二】的回调
8 layer.msg("按钮2回调,参数是:"+index)
9 return false //开启该代码可禁止点击该按钮关闭
10 }
11 });
open方式
<img alt="df9d723abb21b7ec15d33c96919f7256.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-d1f2d36a439ebaaef96da6c76061485a.png">
code
1 layer.open({
2 type: 1
3 ,title: "open方式弹出层" //不显示标题栏 title : false/标题
4 ,closeBtn: true
5 ,area: '300px;'
6 ,shade: 0.8
7 ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
8 ,resize: false
9 ,btn: ['火速围观', '残忍拒绝']
10 ,btnAlign: 'c'
11 ,moveType: 1 //拖拽模式，0或者1
12 ,content: '
<div style="line-height:22px;color:#fff;font-weight:300;">
内容
 内容
</div>'
13 ,success: function(layero){
14 var btn = layero.find('.layui-layer-btn');
15 btn.find('.layui-layer-btn0').attr({
16 href: 'http://www.layui.com/'
17 ,target: '_blank'
18 });
19 }
20 });
layer.msg
语法：layer.msg(content[, options][, end]) 提示框
layer.msg('这里是msg内容');
layer.msg('这里是msg内容',{icon:1});
layer.msg('关闭后想做些什么', function(){
//do something
});
layer.msg('同上', {
icon:1,
time:2000 //2秒关闭(如果不配置，默认是3秒)
},function(){
//do something
});
layer.alert
语法：layer.alert(content[, options][, yes]) 普通信息框
//eg1
layer.alert('只想简单的提示');
//eg2
layer.alert('加了个图