layer弹出层框架alert与msg详解

layer弹出层框架alert与msg详解

layer至今仍作为layui的代表作，她的受众广泛并非偶然，而是这五年多的JBnnNgyU坚持，不断完善和维护、不断建设和提升社区服务，使得猿们纷纷自发传播，乃至于成为今天的Layui最强劲的源动力。目前，layer已成为国内最多人使用的web弹层组件，github自然Stars3000+，官网累计下载量达30w+，大概有20万Web平台正在使用layer。

在贴出代码

layer.alert('见到你真的很高兴', {icon: 6});

这是一个最简单的弹出层,可根据icon配置左边的图标

通常情况下,除了弹窗之外我们一般都会有对按钮做回调处理的一些操作

如图:

layer.alert('墨绿风格，点击确认看深蓝', {

skin: 'layui-layer-molv' //样式类名 自定义样式

,closeBtn: 1 // 是否显示关闭按钮

,anim: 1 //动画类型

,btn: ['重要','奇葩'] //按钮

,icon: 6 // icon

,yes:function(){

layer.msg('按钮1')

}

,btn2:function(){

layer.msg('按钮2')

}});

看下效果图1.

code:

layer.msg('大部分参数都是可以公用的
合理搭配，展示不一样的风格', {

time: 2000, //2s后自动关闭

btn: ['明白了', '知道了', '哦']

});

回调的例子:

code:

layer.msg('也可以这样', {

btn: ['明白了', '知道了']

,yes: function(index, layero){

layer.msg("按钮1回调,参数是:"+index)

}

,btn2: function(index, layero){

//按钮【按钮二】的回调

layer.msg("按钮2回调,参数是:"+index)

return false //开启该代码可禁止点击该按钮关闭

}

});

open方式

code

layer.open({

type: 1

,title: "open方式弹出层" //不显示标题栏 title : false/标题

,closeBtn: true

,area: '300px;'

,shade: 0.8

,id: 'LAY_layuipro' //设定一个id，防止重复弹出

,resize: false

,btn: ['火速围观', '残忍拒绝']

,btnAlign: 'c'

,moveType: 1 //拖拽模式，0或者1

,content: '

,success: function(layero){

var btn = layero.find('.layui-layer-btn');

btn.find('.layui-layer-JBnnNgyUbtn0').attr({

href: 'http://layui.com/'

,target: '_blank'

});

}

});

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。